FCC_React_创建一个可以控制的输入框

问题

代码

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // 修改这行下面的代码
    this.handleChange = this.handleChange.bind(this);
 
    // 修改这行上面的代码
  }
  // 修改这行下面的代码
  handleChange (event) {

    this.setState({

      input: event.target.value

    });

  }
  // 修改这行上面的代码
  render() {
    return (
      <div>
        { /* 修改这行下面的代码 */}
        <input value={this.state.input} onChange={this.handleChange}/>
        { /* 修改这行上面的代码 */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

解答

这里的想法是创建一个受控输入，其中文本从您的状态更新，而不是从浏览器更新。
因此，首先我们有一个骨架，其中有一个名为 ControlledInput 的类和一个名为 input 的状态变量。现在您需要做的就是获取该state，并在观察到输入框中的变化时触发一个函数，该函数会更改该输入框中及其下方段落中的值。

所以你的第一步是制作一个改变状态变量输入的函数。

handleChange(event) {
    this.setState({
      input: event.target.value
    });
}

请记住将 this 绑定到函数。

this.handeChange = this.handleChange.bind(this)

现在您的下一步将涉及创建一个输入框并在有人输入任何内容时触发它。幸运的是，我们有一个名为 onChange() 的事件来满足此目的。
但这不会达到您的目的。虽然你可能会觉得它的工作。所以这里发生的是来自浏览器的文本更新而不是状态。所以为了纠正这个问题，我们将添加一个 value 属性并将其设置为 this.state.input 到 input 元素，这将使输入由状态控制。

<input value = {this.state.input} onChange = {this.handleChange}/>

可能有点难以消化，但为了让事情更清楚，请尝试删除整个 onChange 内容，以便您的代码看起来像这样

<input value = {this.state.input}/>

现在再次运行测试你能输入任何东西吗？
答案是“否”，因为您的输入框正在从状态变量 input 中获取值，因为状态输入（最初是一个空字符串）没有变化，这只会在您触发函数 handleChange() 时发生，它将只有当你有一个像 onChange() 这样的事件处理程序时才会发生，因此输入框中的字符串将保持原样，即空字符串。