Javascript 在提交时获取表单数据

我是个新来的反应者，几个小时以来我一直面临着一个问题。即使我在谷歌或谷歌上发现了一些与我的问题相当的话题，我也无法解决它

我正在使用创建一个简单的表单。目前，我只有一个多选输入。我可以按预期使用它，但当我按“提交”时，我想检索所选的值。我尝试了

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>
    );
  }
});

var MultiSelect=React.createClass({
onLabelClick：函数（数据、事件）{
console.log（数据、事件）；
},
render:function（）{
var ops=[]
this.props.categories.forEach（函数（类别）{
push（{label:category.name，value:category.id}）；
});
返回(
);
}
});
var ProductForm=React.createClass({
提交：函数（）{
log（“Categories:+this.state.Categories”）；
},
onCategoryChange:函数（e）{
console.log（“类别已更改！！！！！！！”）
this.setState（{categories:e.target.value}）；
},
渲染：函数（）{
返回(
提交
);
}
});

---

PS:data

categories

来自Rails控制器。

我认为您的内部

Select

组件应该从

道具
接收
onChange
，该道具提供给
MultiSelect
，假设您的目的是监听
Select
组件上的更改

在
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
不会在
onCategoryChange
中起作用，因为
react select
不会发送标准事件
 我相信您的内部
Select
组件应该从
props
中接收
onChange
，该道具提供给
MultiSelect
，假设您的目的是收听
Select
组件上的更改

在
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
不会在
onCategoryChange
中起作用，因为
react select
不会发送标准事件
 你检查过你的控制台或调试器了吗？你得到了什么错误？@hyphenbash控制台上没有显示日志（信息或错误）。观察到你没有在getInitialState方法中初始化你的类别和其他道具，因此没有指定初始状态。如果您提供初始状态，则还需要使用以下命令更改multiselect指令：categories={this.state.categories}您的类别已初始化的位置您是否检查了控制台或调试器，发现了哪些错误？@hyphenbash没有日志（信息或错误）控制台上显示的观察结果是，您尚未在getInitialState方法中初始化类别和其他道具，因此未指定初始状态。如果您提供初始状态，则还需要使用以下命令更改multiselect指令：categories={this.state.categories}，其中类别已初始化