React TextArea 值未按预期自动更新

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>'s 值和<h2>'s 值是如何设置为 的this.state[this.state.key]，因此它们应始终显示相同的值。但是，如果您更改 key 处的文本值"foo"，然后更改为 key "fooo"，则 h2 的值将更改，但不会更改 textarea。更清楚地说：

1. 在key输入字段中输入“foo”
2. 在 textarea 中输入“hello world”
3. 在key输入字段中输入“foo”
4. 注意<h2>'s 的值现在是空白的，但 textarea 仍然显示“hello world”

Answer 1

要解决此问题，请确保将“非未定义”值传递给 textareasvalue道具，这将导致 textarea 元素按预期更新。

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

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

这是一个有效的代码和框