React 文本区域值不会按预期自动更新

Question

所以我在 React 中玩弄并尝试制作一个应用程序，您可以在其中从组件本身显示和修改组件状态中的任何属性。基本上，您输入一个键(例如"foo"(，然后应用程序会将该键的当前值(例如this.state["foo"](加载到文本区域中，您可以在其中修改该值。

这是沙盒： https://codesandbox.io/s/twilight-bird-6z6cx 这是沙盒中使用的代码：

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends React.Component {
state = {
inputVal: ""
};
onKeyInputChange(e) {
this.setState({ key: e.target.value });
}
onValInputChange(e) {
this.setState({ [this.state.key]: e.target.value });
}
render() {
return (
<div className="App">
<div>
key: <input onChange={this.onKeyInputChange.bind(this)} />
</div>
<div>
value:
<textarea
onChange={this.onValInputChange.bind(this)}
value={this.state[this.state.key]}
/>
</div>
<h2>key: {this.state.key}</h2>
<h2>value: {this.state[this.state.key]}</h2>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

请注意<textarea>的值和<h2>的值都设置为this.state[this.state.key]，因此它们应始终显示相同的值。但是，如果您在键"foo"处更改文本值，然后更改为键"fooo"，则 h2 的值将更改，但文本区域不会更改。说得更清楚一点：

1. 在key输入字段中键入"foo">
2. 在文本区域中键入"Hello World">
3. 在key输入字段中键入"fooo">
4. 请注意<h2>的值现在为空白，但文本区域仍显示"Hello World">

Answer 1

若要解决此问题，请确保将"未定义"值传递给 textareasvalueprop，这将导致 textarea 元素按预期更新。

一个简单的解决方案是在未定义的情况下传递一个空字符串以供value，这可以像这样this.state[this.state.key] || ""：

<textarea onChange={this.onValInputChange.bind(this)} 
value={this.state[this.state.key] || ""} />

这是一个有效的代码沙箱

Answer 2

如果this.state[this.state.key]undefined则受控输入(文本区域(变为可编辑。

这意味着将保留上一个渲染中的值。

您可以使用以下条件来证明：

// editable - value is retained
value={this.state.key === "foo" ? this.state[this.state.key] : null} 
// non-editable
value={this.state.key === "foo" ? this.state[this.state.key] : ""}

因此，要解决此问题，请在this.state[this.state.key]时分配一个空字符串undefined.

<textarea
onChange={this.onValInputChange.bind(this)}
value={this.state[this.state.key] || ""} // if undefined, an empty string will be supplied
/>

Answer 3

如果你做控制台this.state[this.state.key]，你可以看到undefined正在返回，如果undefined被返回，react 不知道你的输入发生了什么，因此它不会更新textArea值。建议始终传递空字符串而不是未定义的值。

在 GitHub 上讨论类似问题 -> https://github.com/facebook/react/issues/6222#issuecomment-194061477

尽量使用箭头函数，不需要绑定函数。

工作示例沙盒