web-dev-qa-db-ja.com

MaterialjsのUIチェックボックスをreactjsとreduxで使用する

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
              }/>
          )}}
reactjscheckboxmaterial-uireact-state-management
6
devanya

onChange()関数の引数としてイベントを追加して、@ BravoZuluによる回答を変更します（また、マテリアルUIチェックボックスのonChange()ではなくonCheck()を使用することに注意してください）公式 ドキュメント ）に示されています。また、コンストラクタで関数をバインドすることを忘れないでください。これがコミュニティに役立つことを願っています。以下はコードです。

    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>)
    }
}
8
uneet7

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>)
  }
}
2
BravoZulu

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 が追加されました。

2
Chase DeAnda

パーティーには少し遅れますが、機能的なコンポーネントとフックを使用したソリューションを次に示します

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;
1
Inigo Villalba

私がついにこの問題の修正を見つけたときも、かなり長い間この問題に悩まされていました。チェックボックスを返す機能コンポーネントに対しては機能しません。別のクラスコンポーネントを作成し、それを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} />
0
Pooja Mahtha