javascript - 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>的值(value)和 <h2>的值都设置为 this.state[this.state.key] ，因此它们应该始终显示相同的值。但是，如果您更改文本值，请键入 "foo" , 然后更改为键 "fooo" ，h2 的值会改变但文本区域不会改变。说得更清楚一点:

1. 在 key 中输入“foo”输入栏
2. 在文本区域中输入“hello world”
3. 在 key 中输入“fooo”输入栏
4. 注意 <h2>的值现在为空，但文本区域仍显示“hello world”

Answer 1

要解决此问题，请确保将“非未定义”值传递给文本区域 value 属性 which will cause the textarea element to update正如预期的那样。

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

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

这是一个有效的 codesandbox