我正在用 react.js 重写我的网络应用程序的 UI，但我被以下问题难住了。

我有一个显示通过 AJAX 请求获得的数据的页面，在该页面下方，显示了一个用于提交新数据的表单。一切顺利。

现在，我想添加一个 <select>元素到表单，并从不同的位置 (url) 获取值。

当前代码(没有 <select> )看起来像这样(稍微简化了一点，但所有工作细节都是一样的；它主要遵循 react.js 网站上的教程):

var tasks_link = $('#tasks_link');

var getDataMixin = {
        loadDataFromServer: function() {
            $.ajax({
                url: this.props.url,
                dataType: 'json',
                success: function(data) {
                    this.setState({data: data});
                }.bind(this),
                error: function(xhr, status, err) {
                    console.error(this.props.url, status, err.toString());
                }.bind(this)
            });
        },
        getInitialState: function() {
            return {data: []};
        },
        componentDidMount: function() {
            this.loadDataFromServer();
        }
    };

var sendDataMixin = {
        handleDataSubmit: function(senddata) {
            $.ajax({
                url: this.props.url,
                dataType: 'json',
                contentType: 'application/json',
                type: 'POST',
                data: senddata,
                success: function(data) {
                    var curr_d = this.state.data;
                    var curr_d_new = curr_d.concat([data]);
                    this.setState({data: curr_d_new});
                }.bind(this),
                error: function(xhr, status, err) {
                    console.error(this.props.url, status, err.toString());
                }.bind(this)
            });
        }
    };

var taskForm = React.createClass({
        handleSubmit: function() {
            var name = this.refs.task_name.getDOMNode().value.trim();
            if (!name) {
              return false;
            }
            this.props.onTaskSubmit(JSON.stringify({name: name}));
            this.refs.task_name.getDOMNode().value = '';
            return false;
        },
        render: function () {
            return (
                <form className="well base_well new_task_well" onSubmit={this.handleSubmit}>
                    <div className="form-group">
                        <div className="input-group">
                            <span className="input-group-addon no_radius">Task name</span>
                            <input type="text" className="form-control no_radius" id="add_new_project_input" ref="task_name"/>
                        </div>
                    </div>
                    <button type="button" className="btn btn-default no_radius add_button" id="add_new_task_btn" type="submit">Add task</button>
                </form>
            );
        }
    });

var taskBox = React.createClass({
        mixins: [getDataMixin, sendDataMixin],
        render: function () {
            return (
                <div id="project_box" className="taskBox"> <taskList data={this.state.data} />
                    <taskForm onTaskSubmit={this.handleDataSubmit}/> </div>
            );
        }
    });

tasks_link.click(function() {
        React.renderComponent(
            <taskBox url="/api/tasks/" />,
            document.getElementById('content_container')
        );
    });

现在，我可以添加 select通过添加 getDataMixin 元素至 TaskForm ，获取数据并构建可能选项的列表，但我需要有包含许多列表的表单，而且该方法似乎无法扩展(由于命名冲突；或者我需要使用 mixin 以外的东西) .

所以我想创建一个单独的 React class ，它只有 getDataMixin ，通过设置其 props 的父级接收 API url ，并呈现 <select>元素;并在表单中使用此类。 但我不知道如何访问选定的值(因为 parent 无法访问它的 child 的 refs )。 所以我需要另一种方法来“向上”传递所选值。

或者，万一这是不可能的，向正确的方向轻推——我不想以大量不可重用的代码结束(我转而使用 React 的部分原因是使用 mixins并将代码保持在合理和可读的最低限度)。

最佳答案

只要您将 child 设置为父级内部的 ref，父级就可以访问其子级的 refs，您可以访问该子级内部的任何 refs。因此，例如 this.refs.childRef.refs.nestedChildRef .然而，这是一个非常糟糕的主意，除非您只是阅读信息(并处理错误，例如 refs 不正确存在，因为 parent 不知道 child 的 ref 是否设置正确)。

但幸运的是，有一个非常简单的解决方案。你是对的，你会想要创建一个子组件来获取它自己的数据，而不是混合。但是，如何处理将所选项目返回给父级的方式，就像将 onChange 函数从父级传递给内置的 <select> 一样。在 react 中。

这是这种父子关系的示例:

var MyParent = React.createClass({
    getInitialState: function() {
        return {
            childSelectValue: undefined
        }
    },
    changeHandler: function(e) {
        this.setState({
            childSelectValue: e.target.value
        })
    },
    render: function() {
        return (
            <div>
                <MySelect 
                    url="http://foo.bar"
                    value={this.state.childSelectValue}
                    onChange={this.changeHandler} 
                />
            </div>
        )
    }
});

var MySelect = React.createClass({
    propTypes: {
        url: React.PropTypes.string.isRequired
    },
    getInitialState: function() {
        return {
            options: []
        }
    },
    componentDidMount: function() {
        // get your data
        $.ajax({
            url: this.props.url,
            success: this.successHandler
        })
    },
    successHandler: function(data) {
        // assuming data is an array of {name: "foo", value: "bar"}
        for (var i = 0; i < data.length; i++) {
            var option = data[i];
            this.state.options.push(
                <option key={i} value={option.value}>{option.name}</option>
            );
        }
        this.forceUpdate();
    },
    render: function() {
        return this.transferPropsTo(
            <select>{this.state.options}</select>
        )
    }
});

上面的例子展示了一个父组件MyParent包括子组件 MySelect它传递一个 url，以及对标准 react 有效的任何其他 Prop <select>元素。使用内置的 React this.transferPropsTo()将所有 Prop 转移到 child 的功能 <select>渲染函数中的元素。

这意味着父定义 changeHandler作为 onChange MySelect 的处理程序将此函数直接传递给 child 的 <select>元素。 So when the select changes, the event gets handled by the parent instead of the child.顺便说一句，这是在 React 中做事的完全合法和合法的方式——因为它仍然遵循自上而下的哲学。如果您考虑一下，当您使用普通的内置 <select> 时从 react 来看，这正是正在发生的事情。 onChange只是 <select> 的属性.

还值得注意的是，如果您愿意，您可以“劫持”更改处理程序以添加您自己的自定义逻辑。例如，我倾向于做的是包装我的 <input type="text" />具有自定义输入组件的字段，该组件接受任何和所有有效的 <input> Prop ，还需要validator函数作为一个属性，它允许我定义一个函数，该函数根据输入到 <input> 的值返回 true/false field 。我可以通过定义 onChange 来做到这一点在父级中，对于包装器子级，但在子级中我定义了自己的 onChange在内部检查 this.props.onChange要定义的函数，然后运行我的验证器并通过调用 this.props.onChange(e, valid) 将事件链传递回父级.在 onChange 中为父级提供完全相同的事件对象处理程序，还添加了一个 bool 值 valid争论。无论如何，我离题了....

希望这对你有帮助:)

关于javascript - 在 React JS 中创建 <select> 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25793918/