React.js中无法输入文本框内容及获取值的问题求助

嘿，我一眼就看出问题所在啦！你的组件里缺少了输入框的 onChange 事件处理逻辑，导致 state 里的 value 没法跟着输入内容更新——这就是为啥输入框敲不进东西，alert 也拿不到正确值的原因～

问题分析 #

你目前只绑定了提交事件，但 React 的受控组件（用 state 控制值的表单元素）需要两个核心配置：

1. value 属性绑定 state 中的对应字段
2. onChange 事件处理函数，用来实时更新 state

没有这俩的话，输入框就是“只读”的，state 也不会变化。

修改后的完整代码 #

import React, { Component } from "react";

class AddNewStudent extends Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
    this.OnSubmit = this.OnSubmit.bind(this);
    // 新增：绑定输入变化的处理方法
    this.handleChange = this.handleChange.bind(this);
  }

  // 新增：处理输入变化，更新state
  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  OnSubmit(event) {
    alert('name value is : ' + this.state.value);
    event.preventDefault(); // 别忘了阻止表单默认提交行为，避免页面刷新
  }

  render() {
    return (
      <form onSubmit={this.OnSubmit}>
        {/* 给input绑定value和onChange */}
        <input
          type="text"
          value={this.state.value}
          onChange={this.handleChange}
          placeholder="输入学生姓名"
        />
        <button type="submit">提交</button>
      </form>
    );
  }
}

export default AddNewStudent;

关键说明 #

• 受控组件逻辑：每次输入时，handleChange 会把输入框的最新值同步到 state 里，value={this.state.value} 再把 state 的值反馈到输入框上，形成“输入→更新state→渲染输入框”的闭环。
• 绑定方法：在 constructor 里绑定 handleChange 是为了确保方法里的 this 指向组件实例，不然调用时 this 会是 undefined。
• 阻止默认行为：event.preventDefault() 能防止表单提交后页面刷新，不然alert刚弹出来页面就刷新了，体验很差。

如果之后你转向函数组件，写法会更简洁（用 useState 钩子），不过现在先把类组件的逻辑搞懂就好啦～

内容的提问来源于stack exchange，提问作者Manish Kumar