React Native表单提交时多输入框空值验证样式异常求助

问题原因 #

你当前的代码中，每次调用setStyle都是基于函数执行时的初始style状态（也就是重置后的空样式）。React会批量处理状态更新，多次setStyle调用会被合并，只有最后一次的设置会生效，所以仅最后一个空输入框会显示错误样式。

修复后的逻辑代码 #

const [name, setName] = useState(null)
const [email, setEmail] = useState(null)
const [message, setMessage] = useState(null)

const [style, setStyle] = useState({
    name : null,
    email : null,
    message : null,
})

const sendEmail = async () => {
    // 先初始化新的样式对象，重置所有输入框样式
    const newStyle = {
        name: null,
        email: null,
        message: null
    }
        
    if(!name || !email || !message){ 
        // 给所有空输入框标记错误样式
        if(!name) newStyle.name = gStyle.inputError
        if(!email) newStyle.email = gStyle.inputError
        if(!message) newStyle.message = gStyle.inputError
        
        // 一次性更新样式状态，避免覆盖
        setStyle(newStyle)
    } else {
        // 执行表单提交逻辑
    }
}

修复后的视图代码 #

需要给每个TextInput绑定对应的样式属性：

<View>
    <TextInput 
        onChangeText={(value) => setName(value)} 
        style={style.name}
    />
    <TextInput 
        onChangeText={(value) => setEmail(value)} 
        style={style.email}
    />
    <TextInput 
        onChangeText={(value) => setMessage(value)} 
        style={style.message}
    />
                    
    <TouchableOpacity onPress={sendEmail}>
        <Text>Send</Text>
    </TouchableOpacity>
</View>

说明 #

通过先构建完整的错误样式对象，再一次性调用setStyle更新状态，就能确保所有空输入框的错误样式都被正确设置，不会被后续的状态更新覆盖。

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