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} />;
  }
}

根据道具或反应状态更改输入

1 个答案: