使用带有 reactjs 和 redux 的 Material-ui 复选框

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

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

    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。

Answer 3

聚会有点晚了，但这里有一个使用功能组件和钩子的解决方案

import React, { useState } from 'react';
import Checkbox from '@material-ui/core/Checkbox';

const App = ({ data }) => {
  const [checked, setChecked] = useState([]);

  const handleCheck = (event) => {
    const { value } = event.target;
    setChecked(checked.includes(value) ? checked.filter(c => c !== value) : [...checked, value]);
  };

  return (
    <div>
      {data.map(({ value }) => (
         <Checkbox onChange={e => handleCheck(e)} checked {checked.includes(value)} />
      ))}
   </div>
  );
};

export default App;

Answer 4

在 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>)
  }
}

Answer 5

当我终于找到解决这个问题的方法时，我也被这个问题困扰了很长一段时间。它永远不会适用于返回复选框的功能组件。我制作了一个单独的类组件并将其包装在 Redux Field 组件中，它运行良好。我真的不明白为什么它不适用于功能组件，因为它在他们的官方示例中显示。

我已经编写了适合我的代码。希望对你有帮助:)

class CheckBoxInput extends React.Component {

  onCheckBoxSelectChange = (input) => 
  {
    input.onChange();
    this.props.onSelectChange();
  }

  render() {
    const { label, input,} = this.props;
    let name = input.name;

    return (
      <div>
        <InputLabel htmlFor={label} style={{paddingTop: '15px'}}> {label} </InputLabel>
         <FormControl {...input} >
          <Checkbox
            name = {name}
            label = {label}
            color= "primary"
            checked={input.value ? true : false}
            onChange={() => this.onCheckBoxSelectChange(input)}
          />          
        </FormControl>
      </div>

    )
  }
}

const CheckBox = (props) => <Field component={CheckBoxInput} {...props} />;
export default CheckBox;

并使用此复选框组件：

 <CheckBox  name="isCurrent" label="Current" onSelectChange = {this.toggleCurrentEmployerSelection} />

Answer 6

如果您使用的是对象而不是简单的数据类型，这里有一个可行的方法：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [{id: 1, name:'banana'},
             {id: 2, name:'kiwi'}],
      checkedValues: []
    }
  }
  handleCheck(element) {
     const values = this.state.checkedValues.filter(e => e.id === element.id).length > 0
            ? this.state.checkedValues.splice( this.state.checkedValues.findIndex( e => e.id === element.id),1)
            : this.state.checkedValues.push(element);
     this.setState({
         checkedValues: values
     });
  }

  render() {
    return (<div>
    { this.state.data.map(el =>
        <Checkbox
           checked={this.state.checkedValues.filter(e => e.id === el.id).length > 0}
           onChange={this.handleCheck.bind(this, el)} //Use .bind to pass params to functions
           value={el}
        />
    )}}
    </div>)
  }
}

所以基本上函数 handleCheck 所做的是检查所选对象是否在 checkedValues 数组中，如果是，则删除它（取消选中大小写），否则添加（大小写） check)，我是否将选中的对象添加到 checkedValues 数组中。

在Checkbox中checked检查checkedValues数组中是否有与当前循环对象相等的对象，（大小写checked/unchecked）