React类组件onChange写法对应不使用defaultValue的函数组件等效代码是什么

首先修正你提供的类组件代码存在的两处笔误：onChange后缺少赋值等号，输入值需要从事件对象e上获取，且value应该绑定到state的title字段，修正后的类组件写法为：

<input onChange={(e) => {this.setState({title : e.target.value})}} value={this.state.title} />

对应的函数组件实现需要使用useState钩子管理受控状态，全程保持受控模式不使用defaultValue，代码如下：

import { useState } from 'react';

function CustomInput() {
  // 初始化title状态，初始值可根据业务需求调整
  const [title, setTitle] = useState('');

  return (
    <input 
      onChange={(e) => setTitle(e.target.value)} 
      value={title} 
    />
  );
}

对应关系说明 #

• 类组件中存储在this.state.title的状态值，对应函数组件中直接声明的title变量
• 类组件中修改状态的this.setState方法，对应useState返回的更新函数setTitle
• 输入框的受控逻辑完全和类组件保持一致，用户输入会实时同步到状态中

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