web-dev-qa-db-ja.com

反応コンポーネントのブール状態を切り替える方法は？

反応コンポーネントのブール状態を切り替える方法を知りたいです。例えば：

コンポーネントのコンストラクタでブール状態チェックがあります：

constructor(props, context) { 
   super(props, context);

   this.state = {
      check: false
   };
};

This.setStateメソッドを使用して、チェックボックスがクリックされるたびに状態を切り替えようとしています：

<label><input type=checkbox" value="check" onChange = {(e) => this.setState({check: !check.value})}/> Checkbox </label>

もちろん、ncaught ReferenceError：check is not definedが返されます。どうすればこれを達成できますか？

事前に感謝します。

javascriptreactjsreactjs-flux
49
noob

誰もこれを投稿していないので、私は正しい答えを投稿しています。新しい状態の更新が前の状態に依存している場合は、新しい状態を返す関数を引数として受け入れるsetStateの関数形式を常に使用します。

あなたの場合：

this.setState(prevState => ({
  check: !prevState.check
}));

docs を参照してください

167
Dane

ここでは、this.state.checkの代わりにcheck.valueを使用する必要があります。

this.setState({check: !this.state.check})

しかし、とにかくbad practiceこの方法でそれを行うことです。別のメソッドに移動して、コールバックをマークアップに直接記述しないでください。

15
Eugene Tsakh

checkedを使用して値を取得します。 onChangeの間、checkedはtrueになり、booleanのタイプになります。

お役に立てれば！

class A extends React.Component {
  constructor() {
    super()
    this.handleCheckBox = this.handleCheckBox.bind(this)
    this.state = {
      checked: false
    }
  }
  
  handleCheckBox(e) {
    this.setState({
      checked: e.target.checked
    })
  }
  
  render(){
    return <input type="checkbox" onChange={this.handleCheckBox} checked={this.state.checked} />
  }
}

ReactDOM.render(<A/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
3
Pranesh Ravi

試してください：

<label><input type=checkbox" value="check" onChange = {(e) => this.setState({check: !this.state.check.value})}/> Checkbox </label>

check: !check.valueを使用することは、宣言していないcheckオブジェクトを探していることを意味します。

this.state.checkの反対の値が必要であることを指定する必要があります。

2
Dan Andersson

Reduxを使用してReactコンポーネントでトグル状態を使用するために検索しているときに、このページに到着しましたが、同じものを使用する方法はありません。

そのため、Reduxを使用してトグル状態を実装するのに苦労していた人の助けになると思います。

レデューサーファイルはここにあります。初期状態falseをデフォルトで取得します。

const INITIAL_STATE = { popup: false };
export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case "POPUP":
            return {
                ...state,
                popup: action.value
            };
        default:
            return state;
    }
    return state;
};

画像をクリックすると状態が変わります。したがって、私のimgタグは、onClick関数を使用してここに入ります。

<img onClick={togglePopup} src={props.currentUser.image} className="avatar-image avatar-image--icon" />

私のToggle Popup関数は以下のようになり、Dispatcherを呼び出します。

const togglePopup = ev => {
    ev.preventDefault();
    props.handlePopup(!props.popup);
};

この呼び出しは、切り替えられた状態を反映するmapDispatchToProps関数の下に移動します。

const mapDispatchToProps = dispatch => ({
    handlePopup: value => dispatch({ type: "POPUP", value })
});

ありがとうございました。

0
Balasubramani M

ブール値を切り替える場合、これが最も簡単であることがわかりました。値が既にtrueである場合、単にfalseに設定します。逆も同様です。未定義のエラーに注意してください、実行する前にプロパティが定義されていることを確認してください

this.setState({
   propertyName: this.propertyName = !this.propertyName
});
0
rychrist88
state = {
  hover: false
}

onMouseEnter = () => {
  this.setState({
    hover: !this.state.hover
  });
};
0
ColeBear