React：使用props和状态

Question

给定一个带有受控输入的React组件，我希望能够：

1. 设置父状态
的输入值
2. 允许用户将输入更改为任何值
3. 仅在用户提交并输入验证后才更新父状态。

我可以使用下面的代码段完成1和2，但由于值通过道具进入ChildComponent，我不知道如何在不使用更改值的情况下更改输入值父母的myInput。

class ChildComponent extends React.Component
{
    render(){
        return <input type="text" value={this.props.inputValue} onChange={this.handleChange.bind(this)} />
    }  
    handleChange(e){
        this.props.onInputChange(e.target.value);
    }
    handleSubmit(){
        // do some validation here, it it passes...
        this.props.handleSubmit();
    }
}

class ParentComponent extends React.Component{
    constructor(){
      super();
      this.state = {myInput: ""};
    }
    render(){
        return <ChildComponent inputValue={this.state.myInput} onInputChange={this.handleChange.bind(this)} />
    }
    handleChange(newValue){
        this.setState({myInput: newValue});
    }
    handleSubmit(){
        // do something on the server
    }
}

Answer 1

然后你只需要将状态移动到子组件，而不是直接从props.inputValue渲染。基本上你只需要将handleChange移到孩子身上。

在props.inputValue中设置getInitialState的初始值，然后确保在componentWillReceiveProps中更新子状态。

Answer 2

componentWillReceiveProps已弃用

来源：https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops

  

此生命周期以前称为componentWillReceiveProps。那   名称将继续使用到版本17。使用   重命名不安全生命周期codemod以自动更新您的   组件。

改为使用以下类似内容：

componentDidUpdate(prevProps) {       
        if (this.props.yourObj != null && prevProps.yourObj !== this.props.yourObj) {
            this.setState({
                yourStateObj = this.props.yourObj
            });
        }
}