how to use semantic UI React Checkbox toggle?

Question

I am trying to use Semantic UI react for layout. These are the following sample code I am having trouble with onChange. I can check to click the toggle but resets everytime I refresh.

import {
  Checkbox
} from 'semantic-ui-react'

onChangeInput(event) {
    let name = event.target.name
    let value = event.target.value

    let talent = this.state.newTalentProfile
    talent[name] = value

    this.setState({
      newTalentProfile: talent
    })

  }
  
  <Select
name = "willing_to_relocate"
ref = "willing_to_relocate"
defaultValue = {this.props.talent.willing_to_relocate}
onChange = { this.onChangeInput.bind(this)} >
  <Option value = ""label = "" / >
  <Option value = "YES"label = "YES" / >
  <Option value = "NO"label = "NO" / >
  </Select>

the below code doesn't work, but the above one works when i make changes it saves it to database

<Checkbox toggle
name = "willing"
ref = "willing"
label = "Willin To Relocate"
onChange = {this.onChangeInput.bind(this)
}

/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

Ajibola Bello · Accepted Answer · 2020-05-12 00:30:27Z

2

  onChangeCheckbox = (evt, data) => {
    let checked = data.checked
    console.log(checked)
  }


 <Checkbox toggle label='Running discounted price?' 
  onClick={(evt, data)=>this.onChangeCheckbox(evt, data)}
   />

This should do the trick.

answered May 12, 2020 at 0:30

Ajibola Bello

5149 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yu Chen · Accepted Answer · 2018-12-31 21:26:58Z

Your code suggests you expect event.target to be a checkbox element, but it is not. If you examine the variable event.target within your browser, you'll notice that it points to a label element, not the checkbox itself. Therefore, I'm guessing that your event.target.value and event.target.label are evaluating to null, causing the rest of your code to not function the way you expect.

There's many ways to get around this. One way is to set a state variable for your component to represent the state of the checkbox:

class TheComponentThatContainsMyCheckbox extends Component {
    state = {
     textValue: null,
     willingToRelocate: true
    }
...

Then, you can create a handler that toggles this state when checked:

toggleCheckBox = () => {
  const willingToRelocate = !(this.state.willingToRelocate);
  this.setState({willingToRelocate}); 
  // Note: if you have other logic here that depends on your newly updated state, you should add in a callback function to setState, since setState is asynchronous
}

Notice that I'm using arrow syntax here, which will automatically bind this for me. Then, hook it up to the onChange event of the Semantic UI Checkbox:

<Checkbox label='Willing to Relocate.' onChange={this.toggleCheckBox}/>

You can now use your this.willingToRelocate state to decide other application logic, passing it up or down using whatever state management pattern you like (state container/store like Redux, React Context, etc.).

christopher_pk · Accepted Answer · 2018-07-03 05:22:35Z

0

I assume your this.onChangeInput handles database updates.

semantic ui react offers a prop checked for Checkbox.

You should have a state {checked: false} in your code, then this.setState whatever in componentDidMount after retrieving the database record.

Pass this.state.checked into checked prop of Checkbox.

answered Jul 3, 2018 at 5:22

christopher_pk

6514 silver badges18 bronze badges

Collectives™ on Stack Overflow

how to use semantic UI React Checkbox toggle?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related