React.js - 立即在onChange事件上更新组件

Question

TLDR ：如何在另一个组件中的textarea onChange事件上立即更新组件？

我正在构建一个小型JSON格式化程序应用程序，以便学习React。我有一个InputArea组件用于输入JSON，一个OutputArea组件用于显示格式化的JSON，这两个组件都在我的App组件中。我有一个基本的工作示例，除了格式化的输出在输入textarea之后出现一步。我意识到这与setState以及状态转换是待决而不是立即的事实有关。我相信我可以使用setState的更新程序回调，或者按照建议使用componentDidUpdate生命周期方法，但我无法理解我在{{1}中需要做的事情让componentDidUpdate更新？

代码不是很好，我只是想让它现在正常运行。

setState

Answer 1

您只需迈出一步，因为这段代码完全符合：

1. this.setState({ inputValue: event.target.value })
2. let parsed = ""
3. try {
4.  parsed = JSON.parse(this.state.inputValue)
5. }
...

让我们通过以上几行：

第1行：您正在使用setState将组件推送到新状态，但正如您在问题中所说，它不是立即采取行动。所以改变还没有到来。

第4行：您正在使用旧状态值，因为正如我在第1行中所述，状态的更改尚未反映在this.state中。

修正：第4行使用event.target.value代替过时的this.state.inputValue