是否有一种方法来更新输入字段，使其在值缺失时周围有一个红色边框

Question

我有一个初始值和错误状态的状态对象，它是一个空数组。

const [values,setValues] = useState([
question: "",
topic: "",
age: "",
gender: "",
consent: false,
]];
const [error,setError] useState([]);

单击触发验证函数的按钮:

let validate = () => {
const { age, gender, topic, consent } = values;
let validationErrors = [];
if (!age) {
let ageError = { name: "Age" };
validationErrors.push(ageError);
}
If (!gender) {
let genderError = { name: "Gender" };
validationErrors.push(genderError);
}
if (validationErrors.length > 0) {
setError(validationErrors);
} else {
setError([]);
return true;
}

我现在如何添加一个类的每个字段，当按钮被点击时缺少一个值。

下面是其中一个输入的JSX:

<select
value={values.topic}
name="topic"
onChange={handleInputChange}
>
<option value="">Velg tema</option>
{categories.nodes.map(topic => (
<option key={topic._id} value={topic._id}>
{topic.title}
</option>
))}
</select>

我已经尝试使用

className={values.gender ? "" : "gend"}

并且那个gend是一个带有红色边框的类

Answer 1

我创建了一个小poc。理想情况下，您应该使用formik等表单库来处理此问题。下面是代码:

import { useState } from "react";
import "./styles.css";
export default function App() {
const [values, setValues] = useState({
question: "",
topic: "",
age: "",
gender: "",
consent: false
});
const [error, setError] = useState([]);
const handleInputChange = (e) => {
const { name, value } = e.target;
if (error.includes(name)) {
setError(error.filter((e) => e !== name));
}
setValues({ ...values, [name]: value });
};
const handleSubmit = (e) => {
const { question, topic } = values; //can add rest according to your requirement
const errorList = [];
if (!question) {
errorList.push("question");
}
if (!topic) {
errorList.push("topic");
}
console.log(errorList);
setError(errorList);
};
console.log(error);
return (
<div className="App">
<div>
<input
type="text"
placeholder="question"
name="question"
value={values.question}
onChange={handleInputChange}
className={error.includes("question") ? "error" : ""}
/>
</div>
<div>
<input
type="text"
placeholder="topic"
name="topic"
value={values.topic}
onChange={handleInputChange}
className={error.includes("topic") ? "error" : ""}
/>
</div>
<select value={values.topic} name="topic" onChange={handleInputChange}>
<option value="">Velg tema</option>
</select>
<button onClick={handleSubmit}>Validate</button>
</div>
);
}

下面是演示:https://codesandbox.io/s/romantic-cohen-61xru?file=/src/App.js:0-1589

Answer 2

对于JSX中的每个输入，添加以下属性:

className={classNames('yourClass', {error: !age})} //example for age input

在CSSadd classerror:

.error {
border: red solid 1px;
}

所以你需要安装classNames模块，你可以从这里了解classNames:https://www.npmjs.com/package/classnames

Answer 3

这就是如何实现的

let validate = () => {
const { age, gender, topic, consent } = values;
let validationErrors = [];
if (!age) {
let ageError = { name: "Alder" };
validationErrors.push(ageError);
document.getElementsById('name').style.borderColor = "red";
}
If(!gender) {
let genderError = { name: "Kjønn" };
validationErrors.push(genderError);
document.getElementsById('gender').style.borderColor = "red";
}
if (validationErrors.length > 0) {
setError(validationErrors);
} else {
setError([]);
return true;
}