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

Question

我对 reactjs 很陌生，所以我写了一个相当简单的页面来测试“动态”<select> 选项以及如何获取所选值。我想做的是在提交时，能够通过迭代this.refs 来获取选定的值，但我得到的是未定义的值。我不确定如何使用手柄更改使其以受控方式工作，因此我选择采用不受控制的方法。但是我想知道如何做到这两种方式。或者是否有更简洁/首选的方式来获取表单提交时选择的值？

同样在select的渲染中，为什么我不能在那里添加ref={this.props.formId}而不是在OptionsList上？如果我删除 OptionsList 上的 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')
);

Answer 1

使用 refs 并不是实现您想要的最佳方式。

一个好办法是

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

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

2º 将handleSelectChange 作为道具传递给<OptionList>

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

3º 使用onChange + handleSelectChange 将<select> 值传递给父组件

var OptionsList = React.createClass({
    render: function () {
        var optionsList = this.props.options.map((option) => {
            return (
                <option key={option.Id} value={option.Value}>{option.Name}</option>
            )
        });
        return (
            <select onChange={(e) => this.props.onChange(this.props.formId,e.target.value)}>
                {optionsList}
            </select>
        );
    }
});

full working example

Answer 2

您获得undefineds 的原因是因为您在refs 中拥有的是您的自定义组件OptionsList 的实例，而不是DOM 元素。这通常适用于 React，如果您在 DOM 元素 (<div ref="myDiv" />) 上放置一个 ref，那么 this.refs.myDiv 将为您提供此 div 的实际物理 DOM 元素。相反，如果您将ref 放在自定义组件上，就像您所做的那样，那么ref 会保存该组件的一个实例。 OptionsList 没有称为 value 的方法或属性，因此是 undefineds。这也应该解决您的第二个问题-每个组件都有自己的refs-当您在OptionsList 中的select 上放置ref 时，它只能在OptionsList 内访问。

为了完成这项工作，您需要在 OptionsList 上公开一些 API 以获取值然后使用它，例如

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

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

然后在FormOptionList： console.log(this.refs[ref].getValue());

以受控方式执行此操作将涉及在 OptionsList 上定义 value 和 onChange 属性 - 您或多或少只是将它们传递给 select。然后在FormOptionList（或其祖先之一）中，您需要拥有value 的状态并使用OptionsList 的value 和onChange 以保持此值与@987654350 同步@。

希望这是有道理的:-)

Answer 3

在您的选择对象中（假设您使用的是 express body-parser）您需要分配一个名称属性，例如，看我的代码

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

然后就可以了！您将获得一个 JSON 对象，其名称为键，值与其关联。