ReactJS：material-uiで複数のチェックボックス値を取得

Question

複数のチェックボックス値を取得するにはどうすればいいですか？参照が材料uiのチェックボックスで動作していない、理由は分かりません。例えば

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

：材料-UIなしexample

あなたは参照して値を得ることができますが、材料-UIでそれは、チェックボックスの値を取得するために別の方法が必要です。

私はAPIからデータを取得しますので、時々追加されます。どのように価値を得るために？どのような機能を書くべきですか？誰でも知っていますか？

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