Question

我有控制组件（我希望我能正确理解这个概念）。这是app.js（父（主）组件）的片段。

...

<Select options={this.state.patterns} 
default={this.state.activePattern} select={this.selectPattern}/>

这是选择组件。这是受控制的 - 我是对的吗？

    var Select = React.createClass({
        getInitialState(){
            return {
                value: this.props.default
            };
        },
        handleChange(e){
            var value = e.target.value;
            this.setState({value: value});
            this.props.select(value);
        },

        render(){
            return (
                <select value={this.state.value} onChange={this.handleChange}>
                    {this.props.options.map(
                        (option, i)=>(
                            <option value={option} key={i}>
                                {option}
                            </option>
                        )
                    )}              
                </select> 
            );
        }   
    });

当用户选择某事时 - handleChange被调用，我们很高兴。

但我也希望能够从我的app.js更改所选值。我该怎么做？

Answer 1

三种方式。

1）“不好”。

Create the ref to the select位于上一级，然后直接致电setState。 `this.refs.mySelect.setState（{value：whaever}）;

2）“更好”。

管理上层的州。从Select local状态中删除选择状态（值），并通过props与select回调一起公开它。实际上不需要额外的生命周期钩子（如componentWillReceiveProps），您只需要删除不需要的东西。像这样：

var Select = React.createClass({
    handleChange(e){
        var value = e.target.value;
        this.props.select(value);
    },

    render(){
        return (
            <select value={this.props.value} onChange={this.handleChange}>
                {this.props.options.map(
                    (option, i)=>(
                        <option value={option} key={i}>
                            {option}
                        </option>
                    )
                )}              
            </select> 
        );
    }   
});

3）“最好”。

Use value links pattern隐藏恼人的回调。 Some good libraries可能会有所帮助：

var Select = ({ options, valueLink }) => (
            <select value={ valueLink.value } onChange={ valueLink.action( ( x, e ) => e.target.value }>
                { options.map(
                    (option, i)=>(
                        <option value={option} key={i}>
                            {option}
                        </option>
                    )
                )}              
            </select> 
        );

选择反应的控制组件更改值

1 个答案: