Change the switch selection field without deleting when the checkbox is unchecked

I create a form in React, there is an option in which you can select a state (for example, Alabama, Alaska, etc.) if a certain select flag is set.

The problem that occurs when unchecking the state selection component is not removed.

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

In the response dev extension, the initial state is set to false. When an item is switched, it shows Input{...}while the state is in that object null.

I believe the problem is that it state_checkboxreturns an object instead of a boolean. I searched, but cannot find a way to update the state of the object Input{...}with @setStateor change it as a boolean from propTypesabove.

+4
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
+3

All Articles