Question

我对reactjs很新，所以我写了一个相当简单的页面来测试一个动态的＆＃39; this.refs选项以及如何获取所选值。我想要做的是提交，能够通过迭代ref={this.props.formId}来获取所选值，但我得到未定义的值。我不确定如何使用手柄更改使其以受控方式工作，因此我选择采用不受控制的方法。但是，我想知道如何以两种方式做到这一点。或者是否有更简洁/首选的方式来获取表单提交中的选定值？

同样在选择的渲染中，为什么我不能在那里添加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') );而不是在OptionsList上？如果我删除了OptionsList上的参考并将其放在选择中，那么它就不会识别任何选择输入。

@user.items.where('"users"."updated_at" < ?', time_shift)

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º使用<select> + onChange

将handleSelectChange值传递给父组件

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" />）上放置一个引号，那么this.refs.myDiv将获得这个div的实际物理DOM元素。相反，如果您像自己一样在自定义组件上放置ref，那么ref将保存该组件的实例。 OptionsList没有名为value的方法或属性，因此undefineds。这也应该解决您的第二个问题 - 每个组件都有自己的refs - 当您在ref select上放置OptionsList时，它只能在{{{}}内访问1}}。

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

OptionsList

然后在{ ... render(){ return ( ... <select ref='select'> {optionsList} </select> ); }, getValue(){ return this.refs.select.value; } }： FormOptionList

以受控风格执行此操作将涉及在console.log(this.refs[ref].getValue());上定义value和onChange道具 - 您或多或少会将这些道具传递给OptionsList。然后在select（或其中一个祖先）中，您需要拥有FormOptionList的状态并使用value＆＃39; s OptionsList和{{ 1}}使此值与value保持同步。

希望有道理： - ）

Answer 3

在您的选择对象中（假设您正在使用表达体解析器），您需要分配一个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获取选择值 - 始终未定义

3 个答案: