React GET form data on submit

Question

I'm new to React and I've been facing a problem since few hours now. Even if I found some topics on Stackoverflow or Google that seems equivalent to my issue, I'm unable to solve it...

I'm using react-select to create a simple form. For now, I have only one multi-select input. I am able to use it as expected but when I press "Submit" I want to retrieve the values selected. I tried with refs, with onChange without success. onChange is never fired, that might be an other issue as well.

var MultiSelect = React.createClass({
    onLabelClick: function (data, event) {
        console.log(data, event);
    },

    render: function() {
      var ops = []

      this.props.categories.forEach(function(category) {
      ops.push({ label: category.name, value: category.id });
    });

        return (
            <div>
                <Select
                    name = {this.props.name}
                    delimiter=" "
                    multi={true}
                    allowCreate={true}
                    placeholder = {this.props.label}
                    options={ops} />
            </div>
        );
    }
});


var ProductForm = React.createClass({
  submit: function () {
    console.log("Categories: " + this.state.categories);
  },

  onCategoryChange: function(e) {
    console.log("CATEGORY CHANGED !!!!!!")
    this.setState({categories: e.target.value});
    },

  render: function () {
    return (
      <form onSubmit={this.submit}>
        <MultiSelect label="Choose a Category" name="categories" categories={this.props.categories} onChange={this.onCategoryChange}/>
        <button type="submit">Submit</button>
      </form>
    );
  }
});

PS : data categories comes from a Rails controller.

have you checked your console or debugger what errors you get? — hiradyazdan, Jul 18 '15 at 19:30
@hyphenbash There is no logs (infos or errors) displayed on the console — ZazOufUmI, Jul 18 '15 at 19:31
one observation is that you haven't initialized your categories and other props in getInitialState method, hence no initial state specified. — hiradyazdan, Jul 18 '15 at 19:37
if you provide initial state then also you need to change your multiselect directive with this: categories={this.state.categories} where your categories are already initialized — hiradyazdan, Jul 18 '15 at 19:47

score 0 · Answer 1 · answered Dec 10 '15 at 17:33

I believe your internal Select component should receive onChange from the props provided to MultiSelect, assuming your intention is to listen to changes on the Select component.

Try something like this inside your MultiSelect's render() method:

return (
    <div>
        <Select
            name = {this.props.name}
            delimiter=" "
            multi={true}
            allowCreate={true}
            placeholder = {this.props.label}
            options={ops} 
            onChange={this.props.onChange} />
    </div>
);

Side note, I don't think e.target.value is going to work inside onCategoryChange, since react-select doesn't send standard events.

React GET form data on submit

1 Answers1