React：用道具和状态控制输入值

Question

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

1. 设置来自父级状态的输入值
2. 允许用户将输入更改为任意值
3. 只有在用户提交并且输入通过验证后才更新父级的状态。

我可以用下面的代码片段完成1和2，但是由于值是通过props进入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移动到子级。

从GetInitialState中的props.inputValue设置初始值，然后确保更新ComponentWillReceiveProps中的子状态。