React中未绑定handleChange方法却能在输入框输入是否正常？

嗨，这完全是正常情况，别担心！

你现在写的是非受控组件，这类组件里的输入框会自己维护内部状态，不需要依赖React组件的state来控制它的值。所以哪怕你没写handleChange方法，输入框依然能正常接收用户输入——它的行为和普通HTML里的输入框完全一致。

而你之前了解到的需要handleChange的场景，是受控组件的用法。受控组件会把输入框的value和React组件的state绑定在一起，比如这样：

import React from "react";
class StudentForm extends React.Component {
  constructor() {
    super();
    this.state = { firstname: '' };
    this.handleChange = this.handleChange.bind(this);
  }

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

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

在受控组件里，输入框的value被固定为this.state.firstname，所以必须通过onChange事件触发handleChange来更新state，输入框的值才会跟着用户输入变化。如果没有handleChange，输入框的value永远是state里初始的空字符串，用户就没法输入内容了。

简单总结下：

• 非受控组件：输入框自带状态，无需绑定state和handleChange，适合简单的输入场景
• 受控组件：由React state控制输入值，需要handleChange同步状态，适合需要实时校验、表单数据同步等复杂场景

内容的提问来源于stack exchange，提问作者Mr bond