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

Question

我想显示选中的复选框项目，为此我正在使用material-ui checkbox。

现在，我只能显示带有复选框的项目，但不能显示所选的项目。

我知道这很容易，但是我是ReactJS和Redux的新手，所以很难启动。

希望能有所帮助。

谢谢。

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

通过将事件添加为函数中的参数来通过@BravoZulu修改答案onChange()（还请注意，如官方文档中所示，使用onChange()而不是onCheck()用于Material-UI复选框）。另外，不要忘记将函数绑定到构造函数中。我希望这对社区有所帮助。下面是代码。

    class App extends Component {
    constructor(props) {
        this.handleCheck = this.handleCheck.bind(this);
        super(props);
        this.state = {
        data: [apple, kiwi, banana, lime, orange, grape],
        checkedValues: []
        }
    }
    handleCheck(e,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()}
            onChange={e => this.handleCheck(e,x)}
            checked={this.state.checkedValues.includes(x)}
            />
        )}}
        </div>)
    }
}

Answer 2

在该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。