Javascript Reactjs onClick：如何设置列表中已单击按钮的状态

我有一个按钮列表，我正试图弄清楚如何获得每个按钮的

状态

，就像这样选择的（因此在任何时候我都知道哪些按钮被点击过）：

请参见此处的代码：

---

类似的方法可以：

//Child
var SingleButton = React.createClass({
  render: function() {
    let { selectedTransport, type, text, handleClick } = this.props;
    let selected = selectedTransport[type];
    var style = selected ? { "backgroundColor":"yellow" } : {
      "backgroundColor":""
    };
    return (
      <button style={style} onClick={handleClick} name={type}> 
        {text}
      </button>
    )
  }
});

//Parent
var Categories = React.createClass({
  getInitialState: function() {
    return { 
      selectedTransport: {
        car: false,
        train: false,
        plane: false
      }
    }
  },
  handleClick: function(event) {
    console.log('CLICK');
    let { selectedTransport } = this.state;
    selectedTransport[event.target.name] = true;
    this.setState({ selectedTransport });
    console.log('TRANSPORT', this.state.selectedTransport);
  },

  render: function() {
    console.log('RENDERING', this.state);
    var transportType = ['car', 'train', 'plane'];
    return (
      <div>
        {transportType.map((type, idx) => (
          <SingleButton 
            {...this.state}
            text={type} 
            handleClick={this.handleClick} 
            key={idx} 
            type={type} 
          />
        ))
      </div>
    );
  }
});


ReactDOM.render(<Categories />, document.getElementById('app'));

//子对象
var SingleButton=React.createClass({
render:function（）{
让{selectedTransport，type，text，handleClick}=this.props；
let selected=selectedTransport[类型]；
var style=所选？{“backgroundColor”：“黄色”}：{
“背景颜色”：”
};
返回(
{text}
)
}
});
//母公司
var Categories=React.createClass({
getInitialState:函数（）{
返回{
所选运输：{
车：错，
火车：错，
飞机：错
}
}
},
handleClick:函数（事件）{
console.log（'CLICK'）；
设{selectedTransport}=this.state；
selectedTransport[event.target.name]=true；
this.setState（{selectedTransport}）；
console.log（'TRANSPORT'，this.state.selectedTransport）；
},
render:function（）{
console.log（'RENDERING'，this.state）；
var transportType=['car'、'train'、'plane']；
返回(
{transportType.map（（type，idx）=>(
))
);
}
});
ReactDOM.render（，document.getElementById（'app'））；

主要思想是在父组件中具有

handleClick

功能，然后在子组件中调用它来更新父组件的状态，然后将其作为道具传递给不同的子组件。我遵循了您现有的结构，结果是：。

非常有魅力。谢谢。

//Child
var SingleButton = React.createClass({
  render: function() {
    let { selectedTransport, type, text, handleClick } = this.props;
    let selected = selectedTransport[type];
    var style = selected ? { "backgroundColor":"yellow" } : {
      "backgroundColor":""
    };
    return (
      <button style={style} onClick={handleClick} name={type}> 
        {text}
      </button>
    )
  }
});

//Parent
var Categories = React.createClass({
  getInitialState: function() {
    return { 
      selectedTransport: {
        car: false,
        train: false,
        plane: false
      }
    }
  },
  handleClick: function(event) {
    console.log('CLICK');
    let { selectedTransport } = this.state;
    selectedTransport[event.target.name] = true;
    this.setState({ selectedTransport });
    console.log('TRANSPORT', this.state.selectedTransport);
  },

  render: function() {
    console.log('RENDERING', this.state);
    var transportType = ['car', 'train', 'plane'];
    return (
      <div>
        {transportType.map((type, idx) => (
          <SingleButton 
            {...this.state}
            text={type} 
            handleClick={this.handleClick} 
            key={idx} 
            type={type} 
          />
        ))
      </div>
    );
  }
});


ReactDOM.render(<Categories />, document.getElementById('app'));