Reactjs 处理状态必须由道具控制的反应控制组件的最佳实践

我在页面上有一个

reset

按钮和一个

input

。单击按钮，将输入重置为0。由于某些原因，我无法在一个react组件中同时实现这两个功能。以下是示例：

游乐场：

问题2：这是更好的解决方案吗？似乎是react团队推荐的

将

MyInput

更改为功能组件：

游戏：

函数MyInput（道具）{
let[value，setValue]=useState（props.value）；
功能手柄更改（e）{
设定值（即目标值）；
}
返回；
}

功能组件看起来更好更干净

问题3：有更好的解决方案吗？最佳做法是什么

class MyInput extends React.Component {
  state = {
    value: this.props.value,
    preProps: this.props
  };

  // call only when props change
  // UNSAFE_componentWillReceiveProps(props) {
  //   this.setState({ value: props.value });
  // }

  // use getDerivedStateFromProps, we need to store preProps
  static getDerivedStateFromProps(props, { preProps }) {
    if (preProps !== props) {
      return {
        value: props.value,
        preProps: props
      };
    }
    return null;
  }

  handleChange = (e) => {
    this.setState({
      value: e.target.value
    });
  };

  render() {
    return (
      <>
        <Input value={this.state.value} onChange={this.handleChange} />
      </>
    );
  }
}

class MyButton extends React.Component {
  state = {
    value: "0"
  };

  handleReset = () => {
    this.setState({
      value: "0"
    });
  };

  render() {
    return (
      <>
        <Button onClick={this.handleReset}>reset</Button>
        <MyInput value={this.state.value} />
        <div>1. revise value in input</div>
        <div>1. 修改 input 里的值</div>
        <div>2. click reset button, make the input reset to '0'</div>
        <div>2. 点击 reset 按钮，让 input 的值重置为 '0'</div>
      </>
    );
  }
}

ReactDOM.render(<MyButton />, document.getElementById("container"));

class MyInput extends React.Component {
  state = {
    value: this.props.value
  };

  handleChange = (e) => {
    this.setState({
      value: e.target.value
    });
  };

  render() {
    return (
      <>
        <Input value={this.state.value} onChange={this.handleChange} />
      </>
    );
  }
}

class MyButton extends React.Component {
  state = {
    value: "0"
  };

  handleReset = () => {
    this.setState({
      value: "0"
    });
  };

  render() {
    return (
      <>
        <Button onClick={this.handleReset}>reset</Button>
        <MyInput key={Math.random()} value={this.state.value} />
        <div>1. revise value in input</div>
        <div>1. 修改 input 里的值</div>
        <div>2. click reset button, make the input reset to '0'</div>
        <div>2. 点击 reset 按钮，让 input 的值重置为 '0'</div>
      </>
    );
  }
}

function MyInput(props) {
  let [value, setValue] = useState(props.value);

  function handleChange(e) {
    setValue(e.target.value);
  }

  return <Input value={value} onChange={handleChange} />;
}