Question

我正在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() }
  )
 )

在react dev扩展中，初始状态设置为false。当项目切换时，它会显示Input{...}，而此对象中的状态为null。

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

Answer 1

您正在使用@refs.state_checkbox来确定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

取消选中特定复选框时，不会删除反转切换选择字段

1 个答案: