Javascript 如何在react js中有条件地呈现错误？

我在reactjs中有一个register form组件和一个material UI组件。我有一个对象数组，其中包含TextField组件的props值。如果字段值为空，我希望有条件地显示“不能为空”辅助文本。例如，如果未输入电子邮件，但输入了名称，我应显示唯一不能为空的电子邮件错误文本

我面临的错误：我能够显示错误，但即使一个输入为空，所有字段都会显示错误

预期：如果出现任何错误，则只应显示相应TextField的帮助器文本

我试过-代码沙盒链接

---

我可以用什么方法来改进这一点？感谢您的帮助。谢谢：）

这是因为您使用的是

布尔值。您应该改用对象：

import { Grid, TextField } from "@material-ui/core";
import { useState } from "react";
import "./styles.css";

export default function App() {
  const [inputErrors, setInputErrors] = useState({}); // PLURALIZED AND INITIALIZED WITH AN EMPTY OBJECT
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const handleChange = (event, index, setValue, setError) => {
    let value = event.target.value;
    if (!value) {
      setError(state => ({
        ...state,
        [event.target.name]: true
      }));
    } else {
      setError(state => ({
        ...state,
        [event.target.name]: false
      }));
      setValue(value);
    }
  };

  const arrObj = [
    {
      name: "Name",
      input: "Please enter your name",
      onChange: (event, index) =>
        handleChange(event, index, setName, setInputErrors),
      helperText: inputErrors.name && "*Name is Required"
    },
    {
      name: "Email",
      input: "enter your email address",
      onChange: (event, index) =>
        handleChange(event, index, setEmail, setInputErrors),
      helperText: inputErrors.email && "*Email is Required"
    }
  ];

  return (
    <div className="App">
      {arrObj.map((item, index) => {
        let { onChange, input, helperText } = item;
        return (
          <Grid key={index} item xs={12} style={{ textAlign: "center" }}>
            <TextField
              name={item.name.toLowerCase()}
              placeholder={input}
              required
              onChange={(event) => onChange(event, index)}
              helperText={helperText}
            />
          </Grid>
        );
      })}
    </div>
  );
}



从“@material ui/core”导入{Grid，TextField}”；
从“react”导入{useState}；
导入“/styles.css”；
导出默认函数App（）{
const[inputErrors，setInputErrors]=useState（{}）；//复数化并用空对象初始化
const[name，setName]=useState（“”）；
const[email，setEmail]=useState（“”）；
const handleChange=（事件、索引、设置值、设置错误）=>{
让值=event.target.value；
如果（！值）{
设置错误（状态=>({
……国家，
[事件.目标.名称]：true
}));
}否则{
设置错误（状态=>({
……国家，
[事件.目标.名称]：false
}));
设置值（值）；
}
};
康斯特·阿罗布=[
{
姓名：“姓名”，
输入：“请输入您的姓名”，
onChange：（事件、索引）=>
handleChange（事件、索引、集合名、集合输入者），
helperText:inputErrors.name&“需要*名称”
},
{
名称：“电子邮件”，
输入：“输入您的电子邮件地址”，
onChange：（事件、索引）=>
handleChange（事件、索引、设置电子邮件、设置输入程序），
helperText:inputErrors.email&&“需要电子邮件”
}
];
返回(
{arrObj.map（（项目，索引）=>{
让{onChange，input，helperText}=item；
返回(
onChange（事件、索引）}
helperText={helperText}
/>
);
})}
);
}

在这里，我们在输入字段上分配一个“name”属性，并在代码中使用它作为错误的键。
您正在使用一个单一布尔值状态
输入者
来决定名称
和
电子邮件
字段的错误，这就是您看到错误的原因。无法区分发生错误的字段

相反，您可以有一个专用的
inputError
对象，它充当输入字段的
Hashmap/字典
，并带有
true/false
指示特定字段是否有错误

整个代码供参考：-

import { Grid, TextField } from "@material-ui/core";
import { useState } from "react";
import "./styles.css";

export default function App() {
  const [inputError, setInputError] = useState({ name: false, email: false });
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const handleChange = (event, index, setValue, setError) => {
    let { value, name } = event.target;
    name = name.toLowerCase();
    if (!value) setError({ ...inputError, [name]: true });
    else {
      setError({ ...inputError, [name]: false });
      setValue(value);
    }
  };
  const arrObj = [
    {
      name: "Name",
      input: "Please enter your name",
      onChange: (event, index) =>
        handleChange(event, index, setName, setInputError),
      helperText: inputError.name && "*Name is Required"
    },
    {
      name: "Email",
      input: "enter your email address",
      onChange: (event, index) =>
        handleChange(event, index, setEmail, setInputError),
      helperText: inputError.email && "*Email is Required"
    }
  ];

  return (
    <div className="App">
      {arrObj.map((item, index) => {
        let { onChange, input, helperText, name } = item;
        return (
          <Grid key={index} item xs={12} style={{ textAlign: "center" }}>
            <TextField
              name={name}
              placeholder={input}
              required
              onChange={(event) => onChange(event, index)}
              helperText={helperText}
            />
          </Grid>
        );
      })}
    </div>
  );
}


从“@material ui/core”导入{Grid，TextField}”；
从“react”导入{useState}；
导入“/styles.css”；
导出默认函数App（）{
const[inputError，setInputError]=useState（{name:false，email:false}）；
const[name，setName]=useState（“”）；
const[email，setEmail]=useState（“”）；
const handleChange=（事件、索引、设置值、设置错误）=>{
让{value，name}=event.target；
name=name.toLowerCase（）；
if（！value）setError（{…inputError，[名称]：true}）；
否则{
setError（{…inputError，[名称]：false}）；
设置值（值）；
}
};
康斯特·阿罗布=[
{
姓名：“姓名”，
输入：“请输入您的姓名”，
onChange：（事件、索引）=>
handleChange（事件、索引、集合名、集合输入程序），
helperText:inputError.name&&“需要*名称”
},
{
名称：“电子邮件”，
输入：“输入您的电子邮件地址”，
onChange：（事件、索引）=>
handleChange（事件、索引、设置电子邮件、设置输入程序），
helperText:inputError.email&&“需要电子邮件”
}
];
返回(
{arrObj.map（（项目，索引）=>{
让{onChange，input，helperText，name}=item；
返回(
onChange（事件、索引）}
helperText={helperText}
/>
);
})}
);
}

您可以通过将
TextField
包装到一个可以管理其自身状态的组件中来分解该公共逻辑。这将大大简化您的代码

import { Grid, TextField } from "@material-ui/core";
import { useState } from "react";
import "./styles.css";

const RequiredTextField = ({item:{ input, helperText }, value}) => {
  const [inputValue, setValue] = useState(value);
  const [inputError, setInputError] = useState(true);

  const onChange = ({target:{value}}) => {
    setInputError(!value);
    setValue(value);
  }

  return <TextField
    placeholder={input}
    required
    value={inputValue}
    onChange={onChange}
    helperText={inputError && helperText}
  />
}

export default function App() {
  const arrObj = [
    {
      name: "Name",
      input: "Please enter your name",
      helperText: "*Name is Required"
    },
    {
      name: "Email",
      input: "enter your email address",
      helperText: "*Email is Required"
    }
  ];

  return (
    <div className="App">
      {arrObj.map((item, index) =>
          <Grid key={index} item xs={12} style={{ textAlign: "center" }}>
            <RequiredTextField item={item} value="" />
          </Grid>
      )}
    </div>
  );
}


从“@material ui/core”导入{Grid，TextField}”；
从“react”导入{useState}；
导入“/styles.css”；
const RequiredTextField=（{item:{input，helperText}，value}）=>{
常量[inputValue，setValue]=使用状态（值）；
const[inputError，setInputError]=useState（true）；
const onChange=（{target:{value}}）=>{
设置输入程序（！值）；
设置值（值）；
}
返回
}
导出默认函数App（）{
康斯特·阿罗布=[
{
姓名：“姓名”，
输入：“请输入您的姓名”，
helperText:“*名称是必需的”
},
{
名称：“电子邮件”，
输入：“输入您的电子邮件地址”，
helperText:“*需要电子邮件”
}
];
返回(
{arrObj.map（（项目，索引）=>
)}
);
}

请注意，我不使用材质UI。确保你没有重新发明轮子。我会很惊讶，这还不是一个功能。
从“@material ui/core”导入{Grid，TextField}；
import { Grid, TextField } from "@material-ui/core";
import { useState } from "react";
import "./styles.css";

export default function App() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [mobile, setMobile] = useState("");
  let inputErrors = {
    name: !name && "Name is Required",
    email: !email && "Email is Required",
    mobile: !mobile && "Phone No is Required"
  };
  const handleChange = ({ target }, setValue) => setValue(target.value);
  const arrObj = [
    {
      name: "Name",
      input: "Please enter your name",
      onChange: (event) => handleChange(event, setName),
      helperText: inputErrors.name && "*Name is Required"
    },
    {
      name: "Email",
      input: "enter your email address",
      onChange: (event) => handleChange(event, setEmail),
      helperText: inputErrors.email && "*Email is Required"
    },
    {
      name: "Mobile",
      input: "enter your mobile number",
      onChange: (event) => handleChange(event, setMobile),
      helperText: inputErrors.mobile && "*Phone No is Required"
    }
  ];

  return (
    <div className="App">
      {arrObj.map((item, index) => {
        let { onChange, input, helperText } = item;
        return (
          <Grid key={index} item xs={12} style={{ textAlign: "center" }}>
            <TextField
              name={item.name.toLowerCase()}
              placeholder={input}
              required
              onChange={(event) => onChange(event, index)}
              helperText={helperText}
            />
          </Grid>
        );
      })}
    </div>
  );
}

从“react”导入{useState}；
导入“/styles.css”；
导出默认函数App（）{
const[name，setName]=useState（“”）；
const[email，setEmail]=useState（“”）；
const[mobile，setMobile]=useState（“”）；
让输入者={
名称：！名称&“名称是必需的”，
电子邮件：！电子邮件&“需要电子邮件”，
手机：！手机&“需要电话号码”
};
常量handleChange=（{target}，setValue）=>setValue（target.value）；
康斯特·阿罗布=[
{
姓名：“姓名”，
输入：“请输入您的姓名”，
在…上