使用Material-ui复选框与reactjs和redux

Question

我想显示选中的复选框项目。对于哪个Im使用material-ui checkbox，所以现在我只能够使用复选框显示项目，但无法显示所选项目。我知道这很容易，但我是新的反应，因此很难开始。希望得到帮助。谢谢。

this.state = { 
      data: [apple, kiwi, banana, lime, orange, grape], 
     }} 
    handleCheck(x) { 
     this.state.checkedValues.push(x); 
    } 
render(){ 
     {this.state.data.map((x) => 
      <Checkbox 
       label={x} key={x.toString()} 
       onCheck={() => this.handleCheck(x)} 
       checked=true 
       }/> 
     )}} 

Answer 1

在handleCheck函数中，您试图错误地更新组件状态。您需要使用setState来更改状态。在你的例子中，状态没有得到更新，所以这可能是你没有看到任何被选中的原因。此外，要帮助清理你的例子有点：

class CheckboxList extends React.Component{ 
    constructor() { 
    super(); 
    this.state = { 
     data: ['apple', 'kiwi', 'banana', 'lime', 'orange', 'grape'], 
     checkedValues: [] 
    } 
    } 
    handleCheck(index) { 
    this.setState({ 
     checkedValues: this.state.checkedValues.concat([index]) 
    }); 
    console.log(this.state.checkedValues.concat([index])) 
    } 
    render(){ 
    const checks = this.state.data.map((item, index) => { 
     return (
     <span key={item}> 
      <input type="checkbox" 
      value={item} 
      onChange={this.handleCheck.bind(this, index)} //Use .bind to pass params to functions 
      checked={this.state.checkedValues.some(selected_index => index === selected_index)} 
      /> 
      <label>{item}</label> 
     </span>) 
    }); 
    return <div>{checks}</div> 
    } 
} 

更新： 新增工作jsfiddle。

Answer 2

在React中，您不应该直接将数据推送到您的状态。相反，使用setState函数。

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     data: [apple, kiwi, banana, lime, orange, grape], 
     checkedValues: [] 
    } 
    } 
    handleCheck(x) { 
    this.setState(state => ({ 
     checkedValues: state.checkedValues.includes(x) 
     ? state.checkedValues.filter(c => c !== x) 
     : [...state.checkedValues, x] 
    })); 
    } 

    render() { 
    return (<div> 
    { this.state.data.map(x => 
     <Checkbox 
      label={x} key={x.toString()} 
      onCheck={() => this.handleCheck(x)} 
      checked={this.state.checkedValues.includes(x)} 
     /> 
    )}} 
    </div>) 
    } 
}