React.js：更新后的子级输入defaultValue在HTML中是正确的，但在页面上无法正确显示

Question

在App中，我有一个子组件，该子组件的子组件包含<input>，另一个子组件包含<input>。结构如下：

<App>
  <Parent>
    <ClassWithInput1 />
  </Parent>
  <ClassWithInput2 />
</App>

在App.state中，我有一个可以通过任何val字段设置的字符串<input>，并且在更新时使用两个defaultValue字段中的<input>属性进行显示。

用ClassWithInput1更新时，<input>中ClassWithInput2的值正确更新。但是，当我在ClassWithInput2中对其进行更新时，所做的更改不会反映在ClassWithInput1中。在两种情况下，App.state.val均正确更新。我在Chrome检查器中进行了检查，HTML中的value属性在ClassWithInput1中是正确的，但实际的更改未显示在页面上。

这里是问题的沙盒示例：https://codesandbox.io/s/zen-thunder-z1p81?file=/src/App.js。

我该如何解决？

Answer 1

您可以重构输入以使每个输入都有本地状态来处理其输入值。在componentDidUpdate处，检查this.props.val是否为新值：

Input.js