Question

我是新手，在处理和调用onChange事件时感到很困惑。

现在，我有两个组成部分： -

    1. Parent component - 

  updateField = e => {
        console.log("update field e called");
        this.setState({
            value: e.target.value
        });
    };

  <InputTypeahead value={this.state.value} label="Email" onChange={this.updateField} typeaheadItems={this.emailAdressess} /

我在调用onChange并取出当前值。直到现在无论我在输入中输入什么，我都会获得价值。

现在，

2.In Child component :

I want to take the value coming from this parent component and using that would like to setstate.

How to achieve this in React js ? I have tried using refs , but result was not successful.

感谢任何帮助。谢谢。

Answer 1

从版本 16.3.0 开始，您可以使用getDerivedStateFromProps方法根据类似

的道具更新状态

class InputTypeahead extends React.Component {
    state = {
       value: ''
    }
    static getDerivedStateFromProps(nextProps, prevState) {
        if(nextProps.value !== prevState.value) {
           return { value: nextProps.value};
        }
        return null;
    }

}

根据 docs ：

在组件之后调用
getDerivedStateFromProps 实例化以及收到新道具时。它应该回来一个更新状态的对象，或者为null以指示新的道具不需要任何状态更新。

在 v16.3.0 之前，你可以使用构造函数和componentWillReceiveProps，如

class InputTypeahead extends React.Component {
    constructor(props) {
       super(props);
       this.state = {
           value: props.value
       }
    } 
    componentWillReceiveProps(nextProps) {
        if(nextProps.value !== this.props.value) {
           this.setState({ value: nextProps.value});
        }
    }
}

在React JS中处理两个有状态组件的onchange

1 个答案: