未选中特定复选框时，反应切换选择字段未删除

Question

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

我遇到的问题是当取消选中该框时，States select 组件没有被删除。

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 dev 扩展中，初始状态设置为false。当项目被切换时，它会显示Input{...}，而该对象中的状态是null。

我认为问题在于 state_checkbox 返回一个对象，而不是布尔值。我已经搜索过，但找不到用@setState 更新Input{...} 对象中的状态或使用上面的propTypes 将其更改为布尔值的方法。

Answer 1

您正在使用@refs.state_checkbox 来确定@​​987654322@ 组件是否应该呈现，但是这个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