React Native多输入字段更新问题：复用React方式为何无效？

你的代码存在几个关键问题，导致通用更新逻辑失效：

错误点分析 #

1. 参数未定义：handleChange 函数只声明了 newTxt 参数，但函数内部却使用了未定义的 e，直接会抛出引用错误
2. React Native TextInput 属性差异：
   • RN 的 TextInput 不支持 web 端的 name 属性作为字段标识，你写的 name='email' 不会被组件识别
   • 混淆了 onChange 和 onChangeText：onChangeText 直接接收输入的文本作为参数，而 onChange 接收的是原生事件对象，且事件对象中没有 target.value 这类 web 端属性
3. 对象键名错误：你试图用 [e.target.value] 作为更新的字段名，这完全不符合需求，应该对应用户对象的键（比如name/email）

正确的通用实现方式 #

方式一：使用 onChangeText（推荐，更简洁） #

通过给 handleChange 传递对应的字段名，实现通用更新：

const Register = () => {
    const [user, setUser] = useState({
        name: '',
        email: '',
        password: '',
    });

    const handleChange = (fieldName) => (newTxt) => {
        setUser(prevState => ({
            ...prevState,
            [fieldName]: newTxt
        }));
    };

    return (
        <View>
            <TextInput
                placeholder='Name...'
                value={user.name}
                onChangeText={handleChange('name')}
            />
            <TextInput
                placeholder='Email...'
                value={user.email}
                onChangeText={handleChange('email')}
            />
            <TextInput
                placeholder='Password...'
                value={user.password}
                onChangeText={handleChange('password')}
            />
            <Button title='Sign Up' onPress={signUp}/>
        </View>
    )
}

方式二：使用 onChange（获取事件对象） #

如果需要使用 onChange，可以通过 testID 传递字段名，再从事件对象中获取输入文本：

const Register = () => {
    const [user, setUser] = useState({
        name: '',
        email: '',
        password: '',
    });

    const handleChange = (e) => {
        const fieldName = e.target.testID;
        const newTxt = e.nativeEvent.text;
        setUser(prevState => ({
            ...prevState,
            [fieldName]: newTxt
        }));
    };

    return (
        <View>
            <TextInput
                placeholder='Name...'
                value={user.name}
                testID='name'
                onChange={handleChange}
            />
            <TextInput
                placeholder='Email...'
                value={user.email}
                testID='email'
                onChange={handleChange}
            />
            <TextInput
                placeholder='Password...'
                value={user.password}
                testID='password'
                onChange={handleChange}
            />
            <Button title='Sign Up' onPress={signUp}/>
        </View>
    )
}

关键说明 #

• 优先使用 onChangeText，它直接提供输入文本，无需处理事件对象，代码更简洁
• 无论哪种方式，都需要显式传递字段标识（闭包传参或testID），因为RN的TextInput没有内置字段名标识
• 更新状态时使用函数式更新（prevState => {...}），可避免异步状态更新导致的旧状态覆盖问题

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