Ad

Get Value From Checked Input In React

- 1 answer

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>

                    })
Ad

Answer

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}
      />
    );
  }
Ad
source: stackoverflow.com
Ad