javascript - ReactJS - 目标随机元素

Question

我在理解渲染后如何与 React 中的元素交互时遇到了一些问题。我目前有这个 fiddle :https://jsfiddle.net/y7dh3vh5/

var items = ["Afghanistan","Albania","Algeria","Andorra","Angola"....

var RepeatModule = React.createClass({
    getDefaultProps: function() {
       return { items: [] }
    },
    render: function() {
        var listItems = this.props.items.map(function(item, i) {
            return (
                <div className="item" key={i}>
                   <p>{item}</p>
                </div>
            );
        });

        return (
            <div>
               {listItems}
            </div>
        );
    }});ReactDOM.render(<RepeatModule items={items} />, document.getElementById('itemList'));

当我按下“突出显示随机国家”按钮时，我正在寻找一种突出显示随机国家的方法。有没有简单的方法来实现它？

提前致谢。

Answer 1

添加状态保存highlightedIndex:

getInitialState () {
    return {
        highlightedIndex: -1
    }
},

为按钮添加方法

setNewTarget: function() {
    var l = this.props.items.length - 1;
    this.setState({
        highlightedIndex: this.randomInteger(0, l)
    })
},

将按钮放入返回渲染

return (
    <div>
        <button onClick={this.setNewTarget}>
            Highlight random country
        </button>
        {listItems}
    </div>
);

实例: https://jsfiddle.net/ufmagg4o/