取消选中特定复选框时，React切换不删除的选择字段

React toggle select field not removing when a specific checkbox is unchecked

本文关键字：删除 字段 选择 React 复选框 取消      更新时间：2023-09-26

我正在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将其更改为布尔值的方法。

您使用@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
相关文章：