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

Ответ 1

Родитель может получить к нему дочерние refs, пока вы устанавливаете дочерний элемент как ref внутри родителя, вы можете получить доступ к любым refs внутри этого дочернего элемента. Так, например, что-то вроде this.refs.childRef.refs.nestedChildRef. Однако это действительно плохая идея, если вы просто не читаете информацию (и обрабатываете ошибки, такие как refs not existing правильно, так как родитель не знает, правильно ли установлен ref ref ref).

Но, к счастью, существует очень простое решение. Вы правы, вам нужно создать дочерний компонент, который получает свои собственные данные, а не mixin. Но как вы обрабатываете выделение выделенного элемента родительскому объекту, просто передайте функцию onChange из родительского элемента, как если бы вы вставляли встроенный <select> в реакцию.

Вот пример этого родительского отношения:

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-адрес вместе с любыми другими реквизитами, которые действительны для стандартного элемента реакции <select>. Использование реакции встроенной функции this.transferPropsTo() для передачи всех реквизитов дочернему элементу <select> в его функции рендеринга.

Это означает, что родительский элемент, определяющий changeHandler в качестве обработчика onChange для MySelect, передает эту функцию непосредственно дочернему элементу <select>. Поэтому, когда выбор изменяет, событие обрабатывается родителем, а не дочерним. И, кстати, это законно законный и законный способ делать что-то в Реактите - поскольку он все еще следует философии сверху вниз. Если вы думаете об этом, когда вы используете обычный встроенный <select>, чтобы реагировать, это именно то, что происходит. onChange является просто свойством для <select>.

Также стоит отметить, что если вам нравится, вы можете "hyjack" обработчика изменений добавить свою собственную логику. Например, то, что я обычно делаю, это переносить мои поля <input type="text" /> с помощью специального входного компонента, который принимает любые и все допустимые реквизиты <input>, но также принимает функцию validator как свойство, которое позволяет мне определить функцию, которая возвращает true/false на основе значения, введенного в поле <input>. Я могу сделать это, указав onChange в родительском, для дочернего элемента оболочки, но затем в дочернем я определяю свой собственный onChange внутри, который проверяет на this.props.onChange, который будет определен, и функцию, затем запускает мой валидатор и передает цепочку событий обратно родительскому объекту, вызывая this.props.onChange(e, valid). Предоставление родительскому объекту в нем одного и того же объекта события onChange, но также с добавленным логическим аргументом valid. Во всяком случае, я отвлекаюсь...

Надеюсь, это поможет вам:)