1

我对 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')
);
4

3 回答 3

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º使用+ 将<select>值传递给父组件onChangehandleSelectChange

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

完整的工作示例

于 2016-07-01T13:12:12.557 回答
1

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

为了使这项工作，您需要公开一些 APIOptionsList以获取值然后使用它，例如

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

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

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

以受控方式执行此操作将涉及在 上定义 avalue和onChangeprop OptionsList- 您或多或少只是将它们传递给select. 然后在FormOptionList（或在它的一个祖先中），你需要有一个状态，value并使用OptionsList'svalue并onChange保持这个值与select.

希望这是有道理的:-)

于 2016-07-01T12:56:22.357 回答
0

在您的选择对象中（假设您使用的是 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 对象，其中一个键作为名称，并与它关联的值。

于 2020-01-22T01:47:23.137 回答