React函数组件中如何通过Props实现TextField的取值与赋值？

先给你指出现有代码里的两个关键问题：

• 单个value state没法存储多个输入框的值，得用对象类型的state来统一管理所有表单字段。
• setValue = event.target.value是错误写法，React的state更新函数是调用式的，应该写成setValue(newValue)。

下面是修正后的完整实现：

1. 优化MyTextField组件（可选，简化代码） #

你的组件已经具备复用性，用展开运算符可以减少重复代码：

// MyTextField.js
function MyTextField(props) {
    return (
        <TextField 
            {...props} // 直接展开所有传入的props，无需逐个手动映射
        />
    )
}
export default MyTextField

2. 重构SignUp组件，实现统一表单状态管理 #

// Signup.js
import { useState } from 'react';
import MyTextField from './MyTextField';

function SignUp() {
    // 用对象存储所有表单字段的初始值，每个字段对应输入框的name属性
    const [formData, setFormData] = useState({
        firstName: '',
        lastName: '',
        emailID: '',
        password: '',
        confirmpassword: ''
    });

    // 统一的输入变更处理函数，适配所有输入框
    const handleInputChange = (event) => {
        const { name, value } = event.target;
        setFormData(prevState => ({
            ...prevState, // 保留原有字段的旧值
            [name]: value // 更新当前输入框对应的字段值
        }));
    };

    // 提交时查看所有表单值的示例函数
    const handleSubmit = (event) => {
        event.preventDefault();
        console.log('所有表单输入值：', formData);
        // 这里可以添加提交到后端的逻辑
    };

    return (
        <form onSubmit={handleSubmit}>
            <MyTextField 
                type="text"  
                label="Firstname" 
                name="firstName" 
                placeholder="Enter Firstname"
                value={formData.firstName}
                handleOnChange={handleInputChange}
            />
            <MyTextField 
                type="text"  
                label="Lastname" 
                name="lastName" 
                placeholder="Enter Lastname"
                value={formData.lastName}
                handleOnChange={handleInputChange}
            />
            <MyTextField 
                type="text"  
                label="emailID" 
                name="emailID" 
                placeholder="Enter emailID"
                value={formData.emailID}
                handleOnChange={handleInputChange}
            />
            <MyTextField 
                type="password"  
                label="password" 
                name="password" 
                placeholder="Enter password"
                value={formData.password}
                handleOnChange={handleInputChange}
            />
            <MyTextField 
                type="password"  
                label="confirmpassword" 
                name="confirmpassword" 
                placeholder="Enter confirmpassword"
                value={formData.confirmpassword}
                handleOnChange={handleInputChange}
            />
            <button type="submit">提交</button>
        </form>
    );
}

export default SignUp;

核心逻辑说明 #

• 对象式state管理：formData把所有输入框的值集中存储，每个字段和输入框的name属性一一对应，后续新增输入框只需在formData里添加对应初始值即可。
• 统一变更处理函数：通过解构event.target的name和value，利用计算属性名精准更新对应字段，避免为每个输入框单独写处理函数。
• 受控组件模式：每个MyTextField都传递了value和handleOnChange，这是React受控组件的标准写法，确保输入框的值完全由state控制，取值和赋值都通过state完成。

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