Multiple checkbox values handling with ReactJS

Question

I'm trying to learn ReactJS and creating a little chore list which adds the name of the chore and the days when the chore should be done.

But I can't figure out how to get an array of the checked checkboxes when handling the submit of the form.

What I'd like is to have an array of all checked values in my newChore.handleSubmit.

var NewChore = React.createClass({
    handleSubmit: function (e) {
        e.preventDefault();
        var name = this.refs.name.value;
        console.log(this.refs.test);
    },
    render: function () {
        return (
            <form className="ChoreForm" onSubmit={this.handleSubmit}>
                <div>
                    <label htmlFor="name">Naam</label>
                    <input type="text" ref="name" id="name" />
                </div>
                <div>
                    <Day number="1" name="Monday" ref="test" />
                    <Day number="2" name="Tuesday" ref="test" />
                </div>
                <input type="submit" value="Opslaan" />
            </form>
        );
    }
});

var Day = React.createClass({
    render: function () {
        return (<div>
            <input type="checkbox" onChange={this.handleChange} ref="day_number" id="day_{this.props.number}" /><label htmlFor="day_{this.props.number}">{this.props.name}</label>
        </div>);
    }
});

Val · Accepted Answer · 2017-08-30 05:17:14Z

3

You can pass the function also in props like you have to declare handle change function in your parent component like:

var NewChore = React.createClass({
  handleSubmit: function (e) {
    e.preventDefault();
    var name = this.refs.name.value;
    console.log(this.refs.test);
  },
  handleChange: function (e) {
  },
  render: function () {
    return (
      <form className="ChoreForm" onSubmit={this.handleSubmit}>
        <div>
          <label htmlFor="name">Naam</label>
          <input type="text" ref="name" id="name" />
        </div>
        <div>
          <Day number="1" name="Monday" ref="test" onHandleChange={this.handleChange} />
          <Day number="2" name="Tuesday" ref="test" onHandleChange={this.handleChange} />
        </div>
        <input type="submit" value="Opslaan" />
      </form>
    );
  }
});

and Pass this function to your child component like

<Day number="1" name="Monday" ref="test" onHandleChange={this.handleChange}/>

and use into your child component

var Day = React.createClass({
  render: function () {
    return (<div>
        <input type="checkbox" onChange={this.props.onHandleChange} ref="day_number" id="day_{this.props.number}" /><label htmlFor="day_{this.props.number}">{this.props.name}</label>
    </div>);
  }
});

edited Aug 30, 2017 at 5:17

Val

22.9k11 gold badges72 silver badges87 bronze badges

answered Nov 9, 2015 at 10:29

Dhaval Patel

7,6116 gold badges43 silver badges72 bronze badges

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

2 Comments

CaptainCarl Over a year ago

I think this has to be the way yes. Should I keep up an array in my data with what is becoming checked/unchecked etc, right? Seems kinda overkill for such a simple list of checkboxes, though. P.S: Don't forget to add the attribute to <Day /> for the onchange prop

Dhaval Patel Over a year ago

yes you have to maintain the checked and unchecked element

Collectives™ on Stack Overflow

Multiple checkbox values handling with ReactJS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related