Get value from checked input in React

Question

I have complex object in React and can 't understand how to get value from checked input. There is piece of code with input. I need to add input checked value instead of words "Input value".

const ClientForm = React.createClass({

      .....

      render: function() {

          ......
          return(

              < AgForm.Input >
              < label className = 'myLabel' >
              < input className = "valueBroker"
              disabled = {
                readOnly
              }
              type = 'checkbox'
              name = 'is_broker'
              onChange = {
                this.form().checkbox('is_broker', true)
              }
              checked = {
                _isTrue(this.form().value('is_broker'))
              }
              />
              Agent < /label> < /AgForm.InputLine> < AgForm.InputLine error = {
                errors.system
              }
              /> < /div>


              module.exports = AddClientForm;



              const ClientListItem = React.createClass({

                    render() {

                      return

                      <div >
                        Input value {
                          (client.kind_name || '').split(',').map((type) => {
                            return <div > {
                              type
                            } < /div>
                          })
                        }

                      < /div>

                    })

Himanshu Teotia · Accepted Answer · 2020-04-27 11:56:36Z

38

I haven't used so much react so far but I think you can get the value of checkbox using :

event.target.checked

edited Apr 27, 2020 at 11:56

answered Apr 17, 2017 at 5:52

Himanshu Teotia

2,1851 gold badge31 silver badges41 bronze badges

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

2 Comments

Harsha Vardhini Over a year ago

Property 'checked' does not exist on type 'EventTarget'.

Coder828 Over a year ago

@HarshaVardhini I believe you need to bind "this" to the input... onChange={this.handleChange.bind(this)}

user6144056 · Accepted Answer · 2016-04-27 05:14:05Z

1

You could just bind the value and the update method to the state of your component and set the actions directly on the initial input markup with the onChange handler.

Note that React is unidirectional, not bidirectional, so it can good to try to control everything from React to your rendered html and not the other way or back and forth.

Following code is from: https://facebook.github.io/react/docs/forms.html

getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function() {
    return (
      <input
        type="text"
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }

answered Apr 27, 2016 at 5:14

user6144056

1 Comment

Saeed D. Over a year ago

The question was about checkbox. Your answer is good but it does not relate to the question directly.The next answer by Himanshu is the correct one event.target.checked

Roman · Accepted Answer · 2017-08-13 09:53:03Z

0

You can use to catch the event

class MyForm extends React.Component {
    handleChange(event){
       console.info(event.target.checked,
                    event.target.value, 
                    event.target.dataset.attr);
    };

    render(){
        return (
        <input
            type="text"
            value={'myValue'}
            data-attr={'attrValue'}
            onChange={this.handleChange}
          />);
   }
};

answered Aug 13, 2017 at 9:53

Roman

22.3k18 gold badges103 silver badges105 bronze badges

Comments

Phil · Accepted Answer · 2019-07-15 04:57:55Z

0

If you're using React refs to retrieve your input values:

class Form extends React.Component {
    constructor(props) {
        //... state

        this.checkBoxRef = React.createRef()
    }

    handleFormSubmit = (e) => {
        e.preventDefault()
        let isChecked = this.checkBoxRef.current.checked
        console.log(isChecked) // true | false
    }

    render() {
         return (
              <Form onSubmit={this.handleFormSubmit}>
                   <input type="checkbox" ref={this.checkBoxRef}/>
                   <button type="submit" />
              </Form>
         )
    }
}

answered Jul 15, 2019 at 4:57

Phil

3,5807 gold badges31 silver badges52 bronze badges

Collectives™ on Stack Overflow

Get value from checked input in React

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related