Javascript 取消选中特定复选框时不删除“反应切换选择”字段

我正在React中创建一个表单，如果选中特定的选择框，您可以在其中选择一个州（如阿拉巴马州、阿拉斯加等）

我遇到的问题是，当取消选中该框时，状态选择组件不会被删除

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() }
  )
 )

Input=require（'react-bootstrap'）。输入
状态=需要（'./States.cjsx'）
module.exports=InputForm=React.createClass(
道具类型：
state_复选框：React.PropTypes.bool
getInitialState:->
{
state_复选框：false
}
切换状态字段：->
console.log（'Toggle state changed'+@refs.state_复选框）
@setState（{state_checkbox:@refs.state_checkbox}）
showStatesField:->
如果@refs.state\u复选框
其他的
假的
渲染：->
返回(
{@showStatesField（）}
)
)

在react dev扩展中，初始状态设置为

false

。当切换该项时，它将显示

Input{…}

，而该对象中的状态为

null

---

我认为问题在于

state_复选框

返回一个对象，而不是布尔值。我已经搜索了

输入{…}

对象中的状态，但找不到用

@setState

更新状态的方法，或者用上面的

propTypes将其更改为布尔值。
您正在使用
@refs.state\u复选框来确定
状态
组件是否应该呈现，但是这个
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

切换状态字段：->
console.log（'Toggle state changed'+@refs.state_复选框）
@setState（{state_checkbox:@refs.state_checkbox.refs.input.checked}）
showStatesField:->
如果@state.state\u复选框
其他的
假的
谢谢Ben解决了我的问题，你能详细解释一下为什么我必须调用refs两次吗？你正在使用
react bootstrap
包中的
Input
，它隐藏了实际呈现给DOM的内部输入元素。因此，我们需要检查
Input
的内部引用以获得实际的html输入。