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

Posted 2023-03-03

【中文标题】未选中特定复选框时，反应切换选择字段未删除

【英文标题】：React toggle select field not removing when a specific checkbox is unchecked

【发布时间】：2016-08-07 22:23:41

【问题描述】：

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

【参考方案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

【讨论】：

感谢 Ben 解决了我的问题，您能否详细说明为什么我必须调用两次裁判？

您正在使用来自react-bootstrap 包的Input，它隐藏了实际呈现给DOM 的内部输入元素。因此，我们需要检查Input 的内部引用以获取实际的html 输入。