Question

我是React的新手，我现在几个小时就遇到了问题。即使我在Stackoverflow或Google上发现某些与我的问题相同的主题，我也无法解决它......

我使用react-select创建一个简单的表单。现在，我只有一个多选输入。我可以按预期使用它，但是当我按下＆＃34;提交＆＃34;我想检索选定的值。我尝试refs，onChange没有成功。 onChange永远不会被解雇，这也可能是另一个问题。

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：数据categories来自Rails控制器。

Answer 1

我认为您的内部Select组件应该从提供给onChange的{{1}}收到props，假设您的意图是收听MultiSelect上的更改成分

在Select的{{1}}方法中尝试类似的内容：

MultiSelect

旁注，我认为render()不会在return ( <div> <Select name = {this.props.name} delimiter=" " multi={true} allowCreate={true} placeholder = {this.props.label} options={ops} onChange={this.props.onChange} /> </div> );内发挥作用，因为e.target.value不会发送标准事件。

在提交时反应GET表单数据

1 个答案: