特定のチェックボックスをオフにしてもトグル選択フィールドが反応しない

Question

リアクションにフォームを作成しています。特定の選択ボックスにチェックが入っていれば、状態（アラバマ、アラスカなど）を選択できるオプションがあります。

問題は、チェックボックスをオフにすると、状態選択コンポーネントが削除されないということです。

Input = require('react-bootstrap').Input 
States = require('./States.cjsx') 

module.exports = InputForm = React.createClass(

propTypes: 
    state_checkbox: React.PropTypes.bool 

getInitialState: -> 
{ 
    state_checkbox: false 
} 

toggleStatesField: -> 
    console.log('Toggle state changed' + @refs.state_checkbox) 
    @setState({ state_checkbox: @refs.state_checkbox }) 

showStatesField: -> 
if @refs.state_checkbox 
    <States /> 
else 
    false 

render: -> 
    return(
    <Input type="checkbox" ref="state_checkbox" label="Import State?" onChange={@toggleStatesField} value={@state.state_checkbox} /> 
     { @showStatesField() } 
) 
) 

react開発者の拡張では、初期状態はfalseに設定されています。項目がトグルされると、このオブジェクトの状態がnullの間にInput{...}と表示されます。

私は、問題がstate_checkboxがブール値ではなくオブジェクトを返すと考えています。私は検索しましたが、オブジェクトの状態を@setStateで更新する方法や、上記のpropTypesのブール値に変更する方法が見つかりません。

Answer 1

を使用して、Statesコンポーネントをレンダリングする必要があるかどうかを判断していますが、このrefは常に真実です。あなたはおそらく@stateを使うつもりです。

toggleStatesField: -> 
    console.log('Toggle state changed' + @refs.state_checkbox) 
    @setState({ state_checkbox: @refs.state_checkbox.refs.input.checked }) 

showStatesField: -> 
if @state.state_checkbox 
    <States /> 
else 
    false