反応成分のブール状態をトグルする方法は？

Question

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

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

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

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

：

私は私のコンポーネントのコンストラクタのboolean状態チェックを持っています

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

もちろん、私はを取得します。未知のReferenceError：チェックは定義されていません。 これをどのように達成できますか？

事前に感謝します。

Answer 1

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

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

をしかし、いずれにせよ、このようにそれを行うには悪い習慣です。それを別のメソッドに移動して、マークアップに直接コールバックを書き込まないほうがはるかに優れています。

Answer 2

試してみてください。

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

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

逆の値this.state.checkを指定する必要があります。

Answer 3

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>

Answer 4

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

：

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

は、それはチェックが定義されていない、それが言うようにまさにdocs