Javascript / CSS：创建自定义CSS并在出现错误时将两个表单域包装成红色边框

Question

如何创建新的自定义边框并使用它包装这两个组件？

当searchComponent处于错误状态时（通过前端输入字段验证），我将错误状态传递给了下拉菜单组件，但是它创建的红色边框在下拉菜单周围看起来并不像在searchComponent上一样。如果验证错误，我正在尝试使dropdown和searchComponent以红色边框均匀突出显示。钩子：

const [searchInputError, setSearchInputError] = useState(false);
const [searchInputErrorText, setSearchInputErrorText] = useState("");

组件：

     <div className="l-grid__col l-grid__col--5 **searchComponent**" data-testid="searchComponent">
                    <Form onSubmit={async () => await fetchData()}>
                    <FormField
                        className="textInput"
                        data-testid="textInput"
                        onChange={e => superOnChange(param, e.target.value)}
                        onBlur={e => {
                            if(param === "number") {
                                validateNumber(e.target.value, setSearchInputError, setSearchInputErrorText);
                                validateNumberLength(e.target.value, setSearchInputError, setSearchInputErrorText, setInputValue);
                            }
                        }


    affixLeft={
     <Select
         data-testid="**dropdown**"
         options={searchOptions()}
         onSelect={e => {
             setParam(e.value);
             superOnChange(e.value, inputValue);
         }}
         hasError = {searchInputError}
         value={inputValue}
     />

Answer 1

您无法访问下拉菜单中的状态吗？

 <Select
         data-testid="**dropdown**"
         options={searchOptions()}
         onSelect={e => {
             setParam(e.value);
             superOnChange(e.value, inputValue);
         }}
         value={inputValue}
         error={searchInputErrorText}
     />

Answer 2

我只是根据错误状态将带有错误的组件周围的div样式化，并将错误消息用作值：

const [errors, setErrors] = useState([])
function findError(attr) {
  return errors.find(err => err.attr === attr)
}
...
return (
  <div style={{ border: findError("attrOne") ? "1px solid red" : "none" }}>
    <FormField name="attrOne" ... />
    {findError("attrOne") ? <span>{findError("attrOne")</span> : null }}
  </div>

  <div style={{ border: findError("attrTwo") ? "1px solid red" : "none" }}>
    <Select name="attrTwo" ... />
    {findError("attrTwo") ? <span>{findError("attrTwo")</span> : null }}
  </div>
)

错误结构将是一个以字段名称为键的对象：

[
  { attr: "attrOne", error: "This field is required" },
  { attr: "attrTwo", error: "You must select one option" },
]

如果对象存在于与attr名称匹配的错误数组中，则该字段上存在错误，如果不存在，则为否。简单，优雅且精致。