我在理解渲染后如何与 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'));
当我按下“突出显示随机国家”按钮时,我正在寻找一种突出显示随机国家的方法。有没有简单的方法来实现它?
提前致谢。
最佳答案
添加状态保存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>
);
关于javascript - ReactJS - 目标随机元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36451176/