如何在reactjs中管理有状态组件

我知道，大多数时候使用无状态组件被认为是最佳实践，并且这些组件的逻辑和状态应该保留在它们的父级中。但这里的问题是，如果另一个父组件需要具有相同的子组件（或其中一些），我们也必须在该父组件中重新创建相同的逻辑和状态。这就是为什么我们有状态和有状态组件，这样它们就可以管理自己的状态和行为，以避免代码重复

这种组件的一个很好的例子是。到目前为止还不错，但我需要有一种方法从父组件控制它的状态，例如，如果我想清空它的值或自动更正它。对于这一点，我们有

类输入扩展了React.Component{
静态类型={
值：PropTypes.string，
标签：PropTypes.string，
};
静态defaultProps={
值：“”，
标签：“”，
};
建造师（道具）{
超级（道具）；
this.state={value:props.value}；
this.handleChange=this.handleChange.bind（this）；
}
组件将接收道具（下一步）{
this.setState（{value:nextrops.value}）；
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
render（）{
返回(
{this.props.label}：
);
}
}

因此，

Parent

将新值传递给其

Input

组件，并且

Input

更新其

组件willreceiveprops

函数中的状态。这里的问题是，现在我们必须始终将

输入

值保存在

父项

中。因为如果我们不传递它，那么它将从

Input

defaultProps

中获取，并且不可能再修改

Input

值

我想实现的是，如果父级

将值传递给
输入
，那么
输入
应该使用它并更新其状态。但当它没有，但传递了其他道具时，
Input
应该保留它自己的值

问题是，无法在
组件willreceiveprops
函数中判断prop是作为
未定义的
传递的，还是等于
defaultProps
的值。一个可能的解决方案是根本不使用
defaultProps
。但是不使用ReactJS的核心功能对我来说似乎是错误的。
看看你在React网站上链接到的示例，状态似乎保持在表单组件（父级）级别，输入元素只是从表单接收道具。我建议在输入组件中根本不使用状态。只需将onChange处理程序和值从父级传递给输入组件。当输入更改时，使用新值调用onChange处理程序（从输入组件），并让父级对其执行任何操作。
input
组件只是一个示例。如果我使它成为无状态的，那么我就必须在使用它的所有其他父组件中重新创建它的逻辑，这很糟糕。我非常喜欢这个主意。因此，我可以通过将一个组件包装到另一个组件来添加功能。查看您在React网站上链接的示例，状态似乎保持在表单组件（父级）级别，而输入元素只是从表单接收道具。我建议在输入组件中根本不包含状态。只需将onChange处理程序和值从父级传递给输入组件。当输入更改时，使用新值调用onChange处理程序（从输入组件），并让父级对其执行任何操作。
input
组件只是一个示例。如果我使它成为无状态的，那么我就必须在使用它的所有其他父组件中重新创建它的逻辑，这很糟糕。我非常喜欢这个主意。因此，我可以通过将一个组件包装到另一个组件来添加功能。
class Input extends React.Component {
  static propTypes = {
    value: PropTypes.string,
    label: PropTypes.string,
  };

  static defaultProps = {
    value: '',
    label: '',
  };

  constructor(props) {
    super(props);
    this.state = { value: props.value };

    this.handleChange = this.handleChange.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ value: nextProps.value });
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  render() {
    return (
      <label>
        {this.props.label}:
        <input type="text" value={this.state.value} onChange={this.handleChange} />
      </label>
    );
  }
}