изменить вход на основе реквизита или состояния в реакции

Question

У меня есть компонент, который включает в себя поле ввода.Этот компонент получит реквизит для инициации значения для поля ввода.

class MyInput extends React.Component{
 constructor(props){
    super(props);
    this.state = {
        phrase : this.props.phrase
    }
 }
 onChange(e) {
    this.setState({
      phrase: e.target.value
    })
 } 
 render(){
   return <input value={this.state.phrase}
           onChange={this.onChange.bind(this)}/>
  }
}

Теперь я хочу иметь возможность изменять значение поля ввода, также меняя реквизиты, но так как мне нужен вводчтобы быть в синхронизации с состоянием, я понятия не имею, как это сделать.

Answer 1

class MyInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      phrase: props.phrase
    };
  }
  onChange = (e) => {
    this.setState({
      phrase: e.target.value
    });
  }
  componentDidUpdate(prevProps) {
    if (this.props.phrase != prevProps.phrase) {
      this.setState({ phrase: this.props.phrase });
    }
  }
  render() {
    return <input value={this.state.phrase} onChange={this.onChange} />;
  }
}