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