react 列表 点击 demo

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) =>
    

      {number} 点击
    
    );
  
    this.state={listItems: listItems};
  
  }
  
  

  handleClick() {
    console.log(this);
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
  
  handleClick2(id,e) {
    alert(id);
    //console.log(this);
    
  }

  render() {
    return (
      

      
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      
      
{this.state.listItems}
      
    );
  }
}

const numbers = [1, 2, 3, 4, 5];

ReactDOM.render(
  ,
  document.getElementById('example')
);