function - ReactJS:使用 material-ui 获取多个复选框值

Question

如何获取多个复选框的值？ Ref 在 Material UI 复选框中不起作用，不知道为什么。

<Checkbox key={i} label={catagory.name} ref="categories" value={catagory_name} name="category"  />

例如:example

如果没有 material-ui，您可以通过 ref 获取值，但是使用 material-ui 则需要另一种方法来获取复选框值。

我从API获取数据，所以它会不时添加更多。如何获得值(value)？我应该写什么功能？有人知道吗？

Answer 1

您可以使用内置的 Material UI 复选框功能 - onChange。它将返回指定的类别 及其值。

app.js

class App extends Component {

  result = new Set();

  handleCheckbox(event, isChecked, value) {
    console.log(isChecked, value); 
    this.res.add(value);
    if (this.res.size === 3) console.log(this.res);
  }

  labelList = [{id: 1, category: 'a'}, {id: 2, category: 'b'}, {id: 3, category: 'c'}]; // your data

  render() {
    return (
      <div className="App">
        {this.labelList.map(element => (
          <CheckboxField
            key={element.id}
            label={element.category}
            category={element.category}
            onChange={this.handleCheckbox}
          />
        ))}
      </div>
    )
  }
}

Checkbox.js

export class CheckboxField extends React.PureComponent {

  handleCheck = (event, isInputChecked) => {
    this.props.onChange(event, isInputChecked, this.props.category);
  };

  render() {
    return (
          <Checkbox
            label={this.props.category}
            iconStyle={{fill: '#000'}}
            value={this.props.category}
            onCheck={this.handleCheck}
          />
    )}
}