reactjs获取选择值-始终未定义

我对reactjs非常陌生，因此我编写了一个相当简单的页面来测试“动态”选项，以及如何获取所选值。我想做的是在提交时，通过遍历

this.refs

获得所选的值，但我得到的是未定义的值。我不确定如何使用手柄更改使其以受控方式工作，因此我选择了不受控的方法。然而，我想知道如何做到这两个方面。或者是否有一种更简洁/首选的方式来获取表单提交中的选定值

同样在select的呈现中，为什么我不能在那里添加一个

ref={this.props.formId}

而不是在选项列表中？如果我删除选项列表上的ref并将其置于选择中，则它无法识别任何选择输入

var data1 = [
  { Id: 1, Name: "Option 1", Value: "Value 1" },
  { Id: 2, Name: "Option 2", Value: "Value 2" },
  { Id: 3, Name: "Option 3", Value: "Value 3" }
];

var data2 = [
  { Id: 4, Name: "Option 4", Value: "Value 4" },
  { Id: 5, Name: "Option 5", Value: "Value 5" },
  { Id: 6, Name: "Option 6", Value: "Value 6" }
];

var FormOptionList = React.createClass({
    handleSubmit: function (e) {
        e.preventDefault();

        for (var ref in this.refs) {
            console.log(this.refs[ref].value);
        }

        return;
    },
    render: function () {
        return (
          <div className="formList">
              <form onSubmit={this.handleSubmit}>
                  <div>
                    <OptionsList key="ListA" formId="ListA" options={this.props.data1} ref="ListA" />
                    <br />
                    <OptionsList key="ListB" formId="ListB" options={this.props.data2} ref="ListB" />
                  </div>
                  <input type="submit" value="Post" />
              </form>
          </div>
      );
    }
});

var OptionsList = React.createClass({
    //getInitialState: function () {
    //    return {
    //        options: [],
    //        selectValue: 'Option 1'
    //    };
    //},
    //handleChange: function(e) {
    //    this.setState({ selectValue: e.target.value })
    //},
    getInitialState: function () {
        return {
            options: []
        };
    },
    render: function () {
        var optionsList = this.props.options.map(function (option) {
            return (
                <option key={option.Id} value={option.Value}>{option.Name}</option>
            )
        });
        return (
            <select>
                {optionsList}
            </select>
        );
    }
});

ReactDOM.render(
  <FormOptionList data1={data1} data2={data2} />,
  document.getElementById('content')
);

var数据1=[
{Id:1，名称：“选项1”，值：“值1”}，
{Id:2，名称：“选项2”，值：“值2”}，
{Id:3，名称：“选项3”，值：“值3”}
];
变量数据2=[
{Id:4，名称：“选项4”，值：“值4”}，
{Id:5，名称：“选项5”，值：“值5”}，
{Id:6，名称：“选项6”，值：“值6”}
];
var FormOptionList=React.createClass({
handleSubmit:函数（e）{
e、 预防默认值（）；
for（此.refs中的变量ref）{
console.log（this.refs[ref].value）；
}
返回；
},
渲染：函数（）{
返回(


);
}
});
var OptionsList=React.createClass({
//getInitialState:函数（）{
//返回{
//选项：[]，
//选择值：“选项1”
//    };
//},
//handleChange:函数（e）{
//this.setState（{selectValue:e.target.value}）
//},
getInitialState:函数（）{
返回{
选项：[]
};
},
渲染：函数（）{
var optionsList=this.props.options.map（函数（选项）{
返回(
{option.Name}
)
});
返回(
{optionsList}
);
}
});
ReactDOM.render(
,
document.getElementById（'content'）
);

获得

未定义的原因是
参考中的
是自定义组件
选项列表的实例，而不是DOM元素。这通常适用于React，如果您在DOM元素（
）上放置了一个ref，那么
this.refs.myDiv
将获得此
div的实际物理DOM元素。相反，如果像您那样在自定义组件上放置
ref
，则
ref
将保存该组件的实例<代码>选项列表
没有名为
值
的方法或属性，因此
未定义
。这还应该解决您的第二个问题-每个组件都有自己的
ref
-当您将
ref
放在
OptionsList
中的
select
上时，它只能在
OptionsList
中访问

为了实现这一点，您需要在
OptionsList
上公开一些API来获取值，然后使用它，例如

{
  ...
  render(){ 
    return (
            ...
            <select ref='select'>
                {optionsList}
            </select>
        );
 },

  getValue(){ return this.refs.select.value; }
}

{
...
render（）{
返回(
...
{optionsList}
);
},
getValue（）{返回this.refs.select.value；}
}

然后在
表单选项列表中
：
console.log（this.refs[ref].getValue（））

以受控方式执行此操作需要在
选项列表
上定义
值
和
onChange
道具-您或多或少只需将它们传递给
选择
。然后在
FormOptionList
（或它的祖先之一）中，您需要有一个带有
值的状态，并使用
选项列表
的
值
和
onChange
来保持该值与
选择
同步

希望这是有意义的：-）
使用refs并不是实现您想要的最好方法

一个好办法是

1º在父组件中添加一个方法来存储
组件的值

handleSelectChange(select,value){
    this.setState({[select] : value})
}

2º通过
handles选择将
更改为
作为道具

<OptionsList key="ListA"
     formId="ListA" options={this.props.data1}
     onChange={this.handleSelectChange} />

在select对象中（假设您使用的是express body解析器），您需要分配一个name属性，例如，查看我的代码

    <select required name='gender' className={classes.selectBox} >
          <option value='NotSelected' >-------</option>
          <option value='Male' >Male</option>
          <option value='Female'>Female</option>
    </select>



-------
男性
女性

要获取此输入值的值，请在POST处理程序中运行以下命令

let {gender, <any other name attributes in your POST form>} = req.body;

let{gender，}=req.body；

就这样！您将获得一个JSON对象，其中一个键作为名称和与之关联的值
 正如@Vladimir所说。在你的
选项列表中写一个getter
：这很有帮助，谢谢。我在第二句话中记下了这一点，假设我从选项列表中删除了ref，在getValue（）中的select中，如果它是道具，我如何获取值？返回this.refs[this.props.formId].value？是的，这应该仍然有效，但我会小心让一个道具指定ref的名称，因为道具可以随时间变化。一般来说，最好使用一个受控制的静态值。如果您有X个选项列表，即在getInitialState中不硬编码ListA、ListB，您将如何处理此问题？您不需要初始状态，您可以在OptionList componentDidMount事件中设置初始值，它将自动添加到您的父状态。我知道了，谢谢。如果我需要设置一个自定义初始状态，会在OptionsList中处理吗？同样使用react，您是否只是将onChange事件从OptionList传播到FormOptionList OptionList的onChange事件中，如果存在父/子关系，这是否是标准做法？让我们假装我有一个，我有一个
let {gender, <any other name attributes in your POST form>} = req.body;