reactjs 获取 select 值 - 始终未定义

Question

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

同样在 select 的呈现中，为什么我不能在 OptionsList 上而不是那里添加 ref={this.props.formId}？如果我删除 OptionsList 上的 ref 并将其放在 select 中，那么它无法识别任何 select 输入。

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

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

为了使这项工作有效，您需要在 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使此值与 select.

保持同步

希望有道理:-)

Answer 2

使用 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 3

在你的 select 对象中（假设你使用的是 express body-parser）你需要分配一个 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;

好了！你会得到一个 JSON 对象，其中有一个键作为名称和与之关联的值。

reactjs 获取 select 值 - 始终未定义

reactjs get select values - always undefined

reactjs

reactjs.net