Создание элементов <select> в React JS

Я переписываю пользовательский интерфейс для своего веб-приложения в response.js, и я немного озадачен следующей проблемой.

У меня есть страница, на которой отображаются данные, полученные с помощью запроса 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 to TaskForm, извлекая данные и создав список возможных параметров, но мне нужно будет иметь формы со многими списками, и подход не будет Кажется, что он масштабируется (из-за коллизий имен, или мне нужно использовать что-то другое, кроме mixins).

Так что, хотя я создаю отдельный React class, который просто имеет getDataMixin, получит URL-адрес API через родительский параметр props и отобразит элемент <select>; и используйте этот класс внутри формы. Но я понятия не имею, как получить доступ к выбранному значению (поскольку родитель не может получить к нему доступ дочерний refs). Поэтому мне нужен другой способ передать выбранное значение "вверх".

Или, в случае, если это невозможно, подталкивание в правильном направлении - я не хочу заканчивать тонну кода без повторного использования (часть причины, по которой я переключился на реакцию, заключалась в использовании mixins и сохраните код в разумном и удобочитаемом минимуме).

Ответ 1