Question

我正在通过官方网站上的几个例子。我在下面找到了根据点击设置按钮值的示例。

参考上面的例子，我使用数组映射并尝试设置特定按钮的按钮值。

class Toggle extends React.Component {
constructor(props) {
  super(props);
  this.state = {isToggleOn: true};
 // This binding is necessary to make `this` work in the callback
  this.handleClick = this.handleClick.bind(this);
 }

 handleClick() {
  this.setState(prevState => ({
    isToggleOn: !prevState.isToggleOn
  }));
}
render() {
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <button key={number} onClick={this.handleClick}>
    {this.state.isToggleOn ? 'ON' : 'OFF'}
  </button>
);
return (
  {listItems}
);
}
}

ReactDOM.render(
 <Toggle />,
 document.getElementById('root')
);

根据上面修改的代码，我已经给出了唯一的密钥，但我仍然可以看到所有按钮都是一次设置。

为什么会这样？我如何才能取得成果。为什么我无法设置唯一标识？

Answer 1

    class Toggle extends React.Component {
constructor(props) {
  super(props);
  this.state = {isToggleOn: [true,true,false,true,true]};
 // This binding is necessary to make `this` work in the callback
  this.handleClick = this.handleClick.bind(this);
 }

 handleClick(index) {
 var testData=this.state.isToggleOn;

 if(this.state.isToggleOn[index]==true)
    testData[index]=false;
 else
    testData[index]=true;

this.setState({isToggleOn:testData});
}
render() {
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number,index) =>
  <button key={number} onClick={this.handleClick.bind(this,index)}>
    {this.state.isToggleOn[index] ? 'ON' : 'OFF'}
  </button>
);

return (
<div>
  {listItems}
  </div>
);
}
}

ReactDOM.render(
 <Toggle />,
 document.getElementById('root')
);

按钮使用react js单击数组映射

1 个答案: