使用styled-components如何实现表单校验失败时输入框显示红色边框

这里提供两种可行实现方式，你可以根据自己的需求选择：

方案1：兼容原有校验逻辑，改动最小 #

直接在现有Input样式定义中添加error类的样式规则即可，你原有e.target.classList.add("error")的校验逻辑完全不需要修改：

const Input = styled.input`
    font: ${fonts.body1};
    padding: 10px;
    border-radius: 5px;
    outline: none;
    border: 1px solid rgba(0, 0, 0, 0.3);
    width: 100%;
    resize: none;
    box-sizing: border-box;
    &:focus {
        border: 1px solid ${palette.primary_blue};
    }
    /* 新增error类样式 */
    &.error {
        border-color: red;
    }
    /* 校验错误时聚焦也保持红色边框 */
    &.error:focus {
        border-color: red;
    }
`;

改完即可直接沿用你之前写的validateMail函数，效果和传统CSS类实现完全一致。

方案2：符合styled-components设计规范的Props驱动写法（更推荐） #

styled-components支持直接给样式组件传递自定义props来动态切换样式，不需要手动操作DOM类名，是更符合React声明式开发理念的写法：

步骤1：改造Input样式支持动态error状态 #

const Input = styled.input`
    font: ${fonts.body1};
    padding: 10px;
    border-radius: 5px;
    outline: none;
    border: 1px solid ${props => props.error ? 'red' : 'rgba(0, 0, 0, 0.3)'};
    width: 100%;
    resize: none;
    box-sizing: border-box;
    &:focus {
        border: 1px solid ${props => props.error ? 'red' : palette.primary_blue};
    }
`;

步骤2：改造InputField组件管理校验状态 #

import { useState } from 'react';

function InputField(props) {
    // 内部维护校验错误状态，也可以直接从父组件传error prop控制
    const [isError, setIsError] = useState(false);

    const handleKeyUp = (e) => {
        // 执行父组件传入的原有onKeyUp逻辑
        if (props.onKeyUp) props.onKeyUp(e);
        // 校验逻辑（也可以提取到父组件通过回调传递结果）
        const mail = e.target.value;
        if (!mailRegex.test(mail)) {
            setIsError(true);
            return;
        }
        setIsError(false);
    }

    return (
        <Field>
            <Label htmlFor={"txt" + props.name}>{props.name + ":"}</Label>
            {/* 把error状态传递给Input组件 */}
            <Input 
                error={isError}
                name={"txt" + props.name} 
                onKeyUp={handleKeyUp}
            />
        </Field>
    );
}

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