无需 onChange 方法即可在输入文本字段中输入

Question

我正在学习 React，下面是我正在尝试的示例代码。我能够渲染这个组件并且能够在没有任何 handleChange() 方法的情况下在输入字段中输入字符吗？这样好吗？因为我所知道的是，为了使输入字段可用于输入，我们需要添加类似下面的 handleChange 方法

handleChange(e) {
    this.setState({ [e.target.name]: e.target.value });
}

import React from "react";

class StudentForm extends React.Component {
  constructor() {
    super();
  }

  render() {
    return (
      <div>
        <form>
          <h1>Student Form</h1>
          <input type="text" name="firstname"></input>
        </form>
      </div>
    );
  }
}

export default StudentForm;

Answer 1

handleChange用于设置状态值。

没有 onChange 处理程序，您可以输入，但您的值不会存储在任何地方。

例如，如果您尝试访问您的状态this.state.firstname，您将始终得到undefined。

你应该有controlled component。这是一种在状态中访问和存储价值的简单而干净的方式。

要使您的组件受控，您应该在输入时使用 value 和 onChange 属性，

<input type="text" name="firstname" value={this.state.firstname} onChange={this.handleChange.bind(this)}></input>

Answer 2

是的，请考虑以下事项

<input type="text" name="firstname" />

这是一个uncrontrolled input，这意味着React 现在不是value，也不是如何更改它。要使input 受控，您需要显式指定value 和onChange 属性以将此输入绑定到React 的state

const Input = () =>{
    const [value, setValue] = useState('')

    return <input value={value} onChange={e => setValue(e.target.value)} />
}

现在input 完全由 React 控制，它提供了必须打印的 value 以及更改它的方法

Answer 3

进行以下更改后，我将此输入元素设置为受控元素，现在如果不使用 onChange 处理程序，我将无法输入任何内容。

import React from "react";

class StudentForm extends React.Component {
  constructor() {
    super();
    this.state = {
      firstname: ""
    };
  }

  render() {
    return (
      <div>
        <form>
          <h1>Student Form</h1>
          <input
            type="text"
            name="firstname"
            value={this.state.firstname}
          ></input>
        </form>
      </div>
    );
  }
}

export default StudentForm;