如何在React中基于按钮点击事件实现文本字段自动填充功能

你要的这个功能核心是用React状态管理同步表单值，用函数组件+Hook的写法实现非常简单，下面是完整可运行的示例：

import { useState } from 'react';

function AutoFillForm() {
  // 定义表单字段对应的状态
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');

  // 预定义的填充数据，你可以按自己的需求修改
  const predefinedData = {
    username: "测试用户",
    email: "test@example.com",
    phone: "13800001111"
  };

  // 点击按钮的填充逻辑
  const handleAutoFill = () => {
    setUsername(predefinedData.username);
    setEmail(predefinedData.email);
    setPhone(predefinedData.phone);
  };

  return (
    <div style={{padding: '20px'}}>
      <div style={{marginBottom: '10px'}}>
        <label>用户名：</label>
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>
      <div style={{marginBottom: '10px'}}>
        <label>邮箱：</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </div>
      <div style={{marginBottom: '20px'}}>
        <label>手机号：</label>
        <input
          type="tel"
          value={phone}
          onChange={(e) => setPhone(e.target.value)}
        />
      </div>
      <button onClick={handleAutoFill}>一键填充预设信息</button>
    </div>
  );
}

export default AutoFillForm;

• 所有文本输入框都通过value属性和useState定义的状态变量绑定，输入框的内容完全由状态控制
• 按钮绑定onClick事件触发填充函数，函数内直接调用状态对应的set方法给状态赋值，React会自动把最新的状态同步到对应输入框，实现自动填充

注意：不要直接修改状态变量的值（比如不要写username = predefinedData.username），必须通过useState返回的set方法修改才能触发组件重新渲染，更新页面内容

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