Reactjs 能够在输入文本字段内键入而无需onChange方法

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

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

从“React”导入React；
类StudentForm扩展了React.Component{
构造函数（）{
超级（）；
}
render（）{
返回(
学生表格
);
}
}
导出默认的StudentForm；

handleChange

用于设置状态值

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

例如，如果您尝试访问您的状态

this.state.firstname

，您将始终得到

未定义的

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

要控制组件，您应该在输入时使用
value
和
onChange
道具

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


<代码> > P>是的，请考虑下面的

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

现在，
输入
完全由React控制，React提供了它必须打印的
值
和更改它的方法
在进行以下更改后，我将此输入元素设置为受控元素，现在如果不使用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;

从“React”导入React；
类StudentForm扩展了React.Component{
构造函数（）{
超级（）；
此.state={
名字：“
};
}
render（）{
返回(
学生表格
);
}
}
导出默认的StudentForm；
它是受控组件还是非受控组件。您可以在这里查看响应：组件。我认为React不允许我们在没有onchange处理程序的情况下也输入，对吗？@Mrbond，您也可以在没有onchange处理程序的情况下输入。谢谢，伙计，现在我理解了受控元素的概念。您回答了我的问题。这是因为您已将状态值绑定到输入，现在您的输入需要onChange处理程序，或者您可以将其设置为
defaultValue
。
const Input = () =>{
    const [value, setValue] = useState('')

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

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;