react
for循环
列表
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 这边绑定是必要的,这样 `this` 才能在回调函数中使用
this.handleClick = this.handleClick.bind(this);
const listItems = props.numbers.map((number) =>
<li key={number.toString()} onClick={this.handleClick2.bind(this, number)}>
{number} 点击
</li>
);
this.state={listItems: listItems};
}
handleClick() {
console.log(this);
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
handleClick2(id,e) {
alert(id);
//console.log(this);
}
render() {
return (
<div>
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
<ul>{this.state.listItems}</ul>
</div>
);
}
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<Toggle numbers={numbers}/>,
document.getElementById('example')
);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。