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

Question

我有一个包含<input type="text"> 的“日期输入”组件。

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

一旦用户输入了一个有效的日期，组件的父组件就会收到该日期。

基于此 - 我试图弄清楚组件或父级是否应该管理状态。

如果我将其设置为 父 管理状态：

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

...这不好，因为每次更改都会通知父级，并且当用户键入时，道具将设置为所有“草稿”值（例如，“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} />
        );
    }
}

这个版本完全按照我想要的方式工作，除了多了一个要求...

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

React 文档在这里解决了这种情况：You Probably Don't Need Derived State

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

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

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

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

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

React 文档的其余部分提到了一些其他可能性 (getDerivedStateFromProps)，但它竭尽全力强调 它们可能不正确。 （注意文章标题！）

这似乎并不罕见，因此必须有一种清晰、简单、有据可查的方法来处理它，这是正确的“反应方式”。那是什么？

Answer 1

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

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