Javascript / CSS:创建CSS类以在出现错误时将两个表单域组件包装成红色边框

问题描述 投票:0回答:2

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

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}
     />
javascript css reactjs components react-hooks
2个回答
0
投票

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

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

0
投票

我只是根据错误状态将带有错误的组件周围的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名称匹配的错误数组中,则该字段上存在错误,如果不存在,则为否。简单,优雅且精致。

© www.soinside.com 2019 - 2024. All rights reserved.