reactjsとreduxのMaterial-UIチェックボックスを使用

Question

選択したチェックボックス項目を表示したい。そのためにはmaterial-ui checkboxを使用していますので、チェックボックス付きのアイテムだけを表示できますが、選択したアイテムを表示することはできません。私はそれが簡単だと知っていますが、私はreactjsとreduxに新しいので、始めるのが難しいと感じています。助けを求めています。ありがとう。 handleCheck機能で

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

、あなたは間違ってあなたのコンポーネントの状態を更新しようとしています。状態を変更するには、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>) 
    } 
}