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

Question

我有一个按钮列表，我想弄清楚如何获得每个按钮的state像这样选择（所以在任何时候我知道该按钮（S）已/已被点击）：

// this.state.selectedTransport: 
{ car: true, train: false, plane: true } or 
{ car: false, train: false, plane: true } or 
{ car: true, train: true, plane: true } etc 

看到代码在这里： http://jsbin.com/gizamovaco/1/edit?html,js,console,output

Answer 1

主要想法是在父组件中使用​​函数，然后在子组件中调用它以更新父项的状态，然后将其作为道具传递给不同的子项。我遵循你现有的结构，结果如下：JSbin。

Answer 2

像这样的工作：

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