Javascript });

上面的示例显示了一个父组件

MyParent

，包括一个子组件

MySelect

，它将url传递给该子组件，以及对标准react

元素有效的任何其他道具。使用react的内置

this.transferPropsTo（）

函数将所有道具转移到孩子的渲染函数中的

元素

这意味着将

changeHandler

定义为

MySelect

的

onChange

处理程序的父级将此函数直接传递给子级的

元素。因此，当select更改时，事件由父级而不是子级处理。顺便说一句，这是一个完全合法和合法的方式做事情的反应-因为它仍然遵循自上而下的哲学。如果您仔细想想，当您使用react的正常内置

时，这正是发生的事情

onChange

只是

的一个属性

还值得注意的是，如果您愿意，可以“hyjack”更改处理程序来添加您自己的自定义逻辑。例如，我倾向于使用自定义输入组件包装我的

字段，该组件接受任何和所有有效的

道具，但也将

验证器

函数作为属性，允许我定义一个函数，该函数根据输入到

字段的值返回真/假。我可以通过在父级中为包装子级定义

onChange

来实现这一点，但在子级中，我在内部定义了自己的

onChange

，它检查要定义的

this.props.onChange

和一个函数，然后运行我的验证器，并通过调用

this.props.onChange将事件链传递回父级（e，valid）

。在父对象的

onChange

处理程序中为父对象提供完全相同的事件对象，但也添加了一个布尔

valid

参数。无论如何，我离题了

---

希望这对您有所帮助：）

Mike，如前所述，您的解决方案不会在选择对象上调用渲染，因为您不使用setState（x）函数。我对代码进行了如下修改，以创建位置数组var optionsArray=[]；，然后更新该数组，最后在循环之后调用：this.setState（{options:optionsArray}）；很好的捕获-这就是我没有在答案中测试代码的原因，尽管我个人更喜欢在直接修改state对象时使用

this.forceUpdate（）

。不过主要是个人喜好。我已经编辑了我的答案来更新它。

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

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