Javascript React.js：父级或组件应该管理状态吗？

我有一个“日期输入”组件，其中包含一个

其目的是允许用户键入有效日期（例如，mm/dd/yyyy）

一旦用户输入有效日期，组件的父级应收到该日期

基于此，我试图找出组件还是父级应该管理状态

如果我将其设置为这样，则父级管理状态：

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

render（）{
返回(
);
}

。。。这是不好的，因为每次更改都会通知家长，并且在用户键入时，道具将设置为所有“草稿”值（例如，“07/2”）

这表明我应该设置它，以便组件管理自己的状态：

class InputDateWithLabel extends Component {

    constructor(props) {
        super(props);

        this.state = {
            value: formatDate(this.props.value) // formatDate() formats a date object into an 'mm/dd/yyyy' string
        };

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

    }

    handleChange(event) {
        // use setState() to update this.state.value so the <input> shows what the user types
    }

    handleBlur(event) {
        // if the user entered a valid date,
        // convert the user's input to a date object,
        // and communicate that to the parent. E.g.,:
        this.props.onChange([new date]);
        // Otherwise, handle the "error"
    }

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

类InputDateWithLabel扩展组件{
建造师（道具）{
超级（道具）；
此.state={
value:formatDate（this.props.value）//formatDate（）将日期对象格式化为“mm/dd/yyyy”字符串
};
this.handleChange=this.handleChange.bind（this）；
this.handleBlur=this.handleBlur.bind（this）；
}
手变（活动）{
//使用setState（）更新this.state.value，以便显示用户键入的内容
}
车把（活动）{
//如果用户输入了有效日期，
//将用户的输入转换为日期对象，
//并与家长沟通。例如：
这个.props.onChange（[新日期]）；
//否则，请处理“错误”
}
render（）{
返回(
);
}
}

这个版本的工作方式正是我想要的，除了一个额外的要求

根据我的应用程序中其他地方可能发生的情况，父级可能需要在该组件中设置日期。但是-现在组件正在管理自己的状态-当父级更改props.value时，我的组件将忽略它

React文档在这里介绍了这种情况：

但他们的解决方案似乎并不适用：

避免上述问题的一种方法是从组件中完全删除状态

这不好，因为我不想让家长负责验证用户的日期输入。我的组件应该是自包含的，包括日期验证，这意味着它需要管理用户输入的“草稿状态”

另一种选择是让我们的组件完全拥有“草稿”状态。在这种情况下，我们的组件仍然可以接受初始值的道具，但它将忽略对该道具的后续更改

这不好，因为我需要保留家长在适当时更改值的能力。

React文档的其余部分提到了一些其他的可能性（

getDerivedStateFromProps

），但它极力强调它们可能不正确。（请注意文章的标题！）

---

这似乎不是一种罕见的情况，因此必须有一种清晰、简单、记录良好的方法来处理它，这就是正确的“反应方式”。这是什么？

让一个组件管理它自己的状态在您的情况下似乎没有那么糟糕，但是您需要添加组件WillReceiveProps，它添加了另一段代码来管理

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

---

我认为你应该选择这个组件是受控的还是非受控的。为什么不控制它并在值通过值时调用

onChange

回调？使用

不是一个好方法。根据React文档，“在大多数情况下，您应该使用受控组件”，这是一个已知的容易出错的问题。这似乎是做这件事的“正确方式”，这也是我想做的。因此，我试图使用一个受控组件来实现我的目标，该组件管理自己的状态，但是父组件仍然能够在适当的时候设置值。对于受控组件，您是如何做到这一点的？“组件管理自己的状态”与受控组件相反。@IsaacFerreira我知道

容易出错。但更好的方法是什么呢？我不想使用

，因为这意味着组件正在向父级发送输入的所有草稿版本（例如，“07/2”），而不是有效的日期对象。

组件将接收props

是啊，那么我将自己停止使用它。谢谢。@Jason-谢谢你的建议。但是，React文档非常清楚，您不应该这样做

componentWillReceiveProps

已被弃用，他们将其描述为反模式！所有你想知道的关于中的变化。有新的方法和替代品，但它被认为是一种反模式，因为它打破了单一的真相来源。你可以让它工作，但它可能会导致讨厌的虫子在路上。