首页 文章

React - 将子下拉菜单状态传递给父级

提问于
浏览 次
0

我正在尝试设置一个使用React的页面 . 该页面有一个下拉菜单组件，该组件应触发父级中的状态更新 . 我尝试过以下几个例子，但无法正常工作 . 以下是我尝试过的两种方法的简化示例：

  • 将回调作为道具传递给更新父状态的子项：
let Example = React.createClass({

getInitialState() {
    test: "fail"
},
_updateOnChange(value) {
    this.setState({test: value})
},
render() {
    return (<div><DropDown onValueChange=this._updateOnChange} />
    <p>{this.state.test}</p></div>);
}    
});

let DropDown = React.createClass({
getInitialState() {
    return { value: "fail" };
},
_onChangeHandler(e) {
    this.setState({value: e.target.value});
    this.props.onValueChange(this.state.value);
},

render() {
    return (
        <select onChange={this._onChangeHandler} value={this.state.value}>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    );
}

}）;

这始终显示“失败”而不是“1”或“2” .

  • 让父级使用onChange而不是回调来获取下拉菜单的值 .
let Example = React.createClass({
getInitialState() {
    test: "fail"
},
_updateOnChange(e) {
    this.setState({test: e.target.value})
},
render() {
   return (<DropDown onChange=this._updateOnChange} />);
}

}）;

let DropDown = React.createClass({
getInitialState() {
    return { value: "fail" };
},
_onChangeHandler(e) {
    this.setState({value: e.target.value});
},

render() {
    return (
        <select onChange={this._onChangeHandler} value={this.state.value}>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    );
}

}）;

如果我尝试渲染状态，我可以在DropDown组件中看到状态更改，但父级不会更改 . 我究竟做错了什么？

reactjs

1 回答

  • 1

    你的第一种方法应该可以正常工作几次更改

    getInitialState方法应该返回一个这样的对象

    getInitialState() {
  return { test: "fail" }
}

    DropDown组件中的_onChangeHandler存在问题 . 你有两种方法来解决这个问题

    选项1

    第二行 this.props.onValueChange(this.state.value); 将在设置状态后不执行，因此它将显示旧值 . setstate定义看起来像这样

    setState（function | object nextState [，function callback]）

    使用回调函数确保已设置状态，然后执行this.prop

    _onChangeHandler(e) {
  var self = this;
  this.setState({value: e.target.value}, function(){
    self.props.onValueChange(self.state.value); // <---- Makes sure that the state has been set at this stage
  });
},

    选项2

    而不是传递 this.state.value 只是像这样发送 e.target.value

    _onChangeHandler(e) {
  this.setState({value: e.target.value});
  this.props.onValueChange(e.target.value); // <--- pass the value directly
},

    这是一个演示 https://jsfiddle.net/dhirajbodicherla/aqqcg1sa/4/

    回复于

相关问题