与受控组件的外部交互

Question

我有一个组件（ MyComponent ），其中有两个文本字段。在顶部文本字段中输入文本，然后在第二个字段中更改文本（请参见图）。

我是使用onChange（）和setState（）的简单受控组件。

现在我在外部组件中有一个文本字段。我想听听对此文本字段的更改，并在 MyComponent 中更新相同的显示文本字段。

基本上，我有两个文本字段可以更新相同的文本字段，但是其中一个在组件中，而另一个在组件外部。

最好的方法是什么？

我觉得这是一件很简单的事情，但是我发现自己陷入了一些复杂的困境，试图找到解决方案。

我看过的东西：

• componentWillReceiveProps-已弃用
• componentDidUpdate-看起来不错，但这发生在渲染之后，因此无法使用
• getDerivedStateFromProps-这是我最倾向于的地方

Answer 1

我认为这是您的解决方案... https://stackblitz.com/edit/react-7zbxti