React未显式设置input的value属性时为何默认表单特性未执行

云上老周

2026-8-27

import React from "react";

export default class Form extends React.Component{
    constructor(props) {
        super(props);
        this.inputRef = React.createRef();
        this.state = {
            value:""
        }
    }

    // handleClick
    handleClick = (e) => {
        this.setState({ value: e.target.value })
        console.log(e.target.value)
    }

    render() {
        return <>
            <h2>Typig ... {this.state.value}  </h2>
            <form>
                <input type="text" ref={this.inputRef} onChange={this.handleClick}  />
            </form>
        </>
    }
}

原因说明

你之前的认知存在偏差：React不存在"无法直接修改input标签值、必须手动写事件处理才能更新输入值"的全局规则，这个限制仅对受控组件生效。

受控组件的触发条件：只有你给<input>显式绑定了非空的value属性（即传入的值不是undefined或null）时，React才会接管输入框的值控制权。此时输入框展示的内容完全由你绑定的value决定，如果你不写onChange事件同步更新绑定的状态值，React每次重渲染都会把输入框内容重置为绑定的value，才会出现"输入没反应"的现象。
你当前代码里的<input>没有传入任何value属性，属于非受控组件，React从始至终不会干预它的原生行为：浏览器默认的输入逻辑会正常响应键盘操作、更新输入框内的内容，和你有没有写onChange、onChange里写了什么逻辑没有关系。

你代码里的onChange回调只做了一件事：把输入框当前的实时值同步到组件state中，用来渲染上方标题的输入提示，完全没有干涉输入框本身的原生输入流程。哪怕你把整个onChange绑定、handleClick方法都删掉，这个输入框照样可以正常打字输入。

补充说明：你代码里创建的inputRef没有被实际使用，非受控组件的常规取值方式就是通过ref直接访问DOM节点拿值，你现在的写法属于非受控组件基础上额外加了一层事件同步状态到state，两种逻辑混用没有功能冲突，但属于冗余写法。

如果要复现你认知里"输入不生效"的效果，只需要给input加上value绑定把它改成受控组件，同时去掉setState逻辑即可：

{/* 这时候不写onChange更新state的话，输入框会一直显示空字符串，无法输入内容 */}
<input type="text" ref={this.inputRef} value={this.state.value} />

内容的提问来源于stack exchange，提问作者ahmedraza farooqui