Javascript 如何在映射输入中的任何无效输入索引周围添加红色边框

我有一个模式，它将对象

新窗格的每个元素映射到一行：

        {newCompanies.map((company, index) => {
          return (
            <div>
              <div
                className="side-by-side"
              >
                  <ModalInput
                    type="text"
                    id="name"
                    value={company.name}
                    onChange={(e) =>
                      this.editCompanyArr(index, "name", e, "validName")
                    }
                  ></ModalInput>
                  <ModalInput
                    type="text"
                    id="website"
                    value={company.website}
                    onChange={(e) =>
                      this.editCompanyArr(
                        index,
                        "website",
                        e,
                        "validWebsite"
                      )
                    }
                  ></ModalInput>
                      <ModalInput
                        type="text"
                        id="sector"
                        value={company.class}
                        onChange={(e) =>
                          this.editCompanyArr(
                            index,
                            "sector",
                            e,
                            "validSector"
                          )
                        }
                      ></ModalInput>

这个函数检查用户输入的值是否正确。例如，如果名称包含数字，
validName
的值将变为
false
：

  editCompanyArr(i, obj, e, stateObject) {
      const { newCompanies, validName } = this.state;
      if (e.target.value.match("^[a-zA-Z ]*$") != null) {
        this.setState({ [stateObject]: true });
      } else {
        this.setState({ [stateObject]: false });
      }
      //edited out more body to update value in newCompanies
}

如果用户为任何映射行输入了不正确的输入，如何确保只有该特定输入而不是其余输入获得红色边框？
您可以尝试以下方法：

定义您需要的状态变量，我为输入值
name
和
age
创建了一个状态变量（作为示例）。我还为类定义了状态，以便当该值更改时，组件重新渲染，并且边框颜色更新

我设置了一些初始的
className
值，以便第一次渲染带有红色边框（
border danger
在引导中）

//初始类
常量initialClassNames={
名称：“边境危险”，
年龄：“边境危险”，
};
//需要的国家
const[classNames，setClassNames]=useState（initialClassNames）；
const[values，setValues]=useState（{name:，age:0}）；

然后，我为不同的字段分配了它们自己的规范，我希望稍后映射这些规范。注意状态值是如何绑定到输入字段规范的

//所有输入字段的规格
常量输入字段=[
{
inputLabel:“名称”，//输入字段的标签
inputName:“name”，//name
inputValue:values.name，//value
inputClassName:classNames.name//className
},
{
输入标签：“年龄”，
输入名称：“年龄”，
inputValue:values.age，
inputClassName:classNames.age
}
];

在
return（）
中，我映射所有字段并提供所需的JSX

返回(
{inputFields.map（（f，i）=>{
返回(
{f.inputLabel}
);
})}
);

这是您希望为输入处理更改事件的方式：

//输入的handleChange
常数handleChange=（e）=>{
e、 预防默认值（）；
设定值({
价值观
[e.target.name]：e.target.value
});
};

您可以这样做一些验证：

useffect（（）=>{
//验证名称
if（values.name）{
setClassNames（（prevState）=>{
返回{…prevState，name:（prevState.name=“border success”）}；
});
}否则{
setClassNames（（prevState）=>{
返回{…prevState，name:（prevState.name=“border danger”）}；
});
}
//验证年龄
if（parseInt（values.age，10））{
setClassNames（（prevState）=>{
返回{…prevState，age:（prevState.age=“border success”）}；
});
}否则{
setClassNames（（prevState）=>{
返回{…prevState，age:（prevState.age=“border danger”）}；
});
}
}，[values.name，values.age]）；

在
useffect（）
函数中，每次输入值更改（组件重新渲染）时，我都会检查输入字段是否正确填充。根据这一点，我将类名更改为所需的值。在本例中，我使用了引导类（border danger，border success），但如果需要，您可以使用自己的样式来实现这一点

如果您只希望在例如按钮
onClick（）
上进行验证，这也是可能的

我认为最好的方法是添加一个CSS类，为他们提供您想要的大纲。为状态中的每个输入保留一个标志，如果其值无效，则在提交时将其设置为true。然后，您可以在用户单击输入或类型时清除错误

JSX:

这会在用户键入时检查输入吗？@user2555否不会。如果用户曾经输入，输入上的错误将被清除。它当前仅在用户尝试提交表单时检查有效性并设置错误。如果您希望始终检查用户类型的有效性，将其添加到输入上的Onchange回调。我更新了我的答案，考虑查看并给出一些反馈。问候你能把身份证通过循环吗？可能吗？
newCompanies
对象的结构是什么。最好且最简单的方法是将带有错误状态的id存储在状态中，并根据错误值&id将道具传递给
样式化组件
，以进行比较。下面的答案令人困惑。
  editCompanyArr(i, obj, e, stateObject) {
      const { newCompanies, validName } = this.state;
      if (e.target.value.match("^[a-zA-Z ]*$") != null) {
        this.setState({ [stateObject]: true });
      } else {
        this.setState({ [stateObject]: false });
      }
      //edited out more body to update value in newCompanies
}

const App = () => {
  const [inputError, setInputError] = useState(false)
  const refs = {
    exampleInput: null
  }
  return (
    <form onSubmit={e => {
      const exampleInput = this.refs.exampleInput
      const exampleInputVal = exampleInput.value
      if(exampleInputVal) {
        // It's valid! Submit it
      } else {
        // INVALID! Set error state: 
        setInputError(true)
      }
    }}>
      <input 
        className={inputError ? 'error' : ''} 
        ref={el => { refs.exampleInput = el }}
        onChange={e => setInputError(false)}
        onFocus{e => setInputError(false)}
      />
    </form>
  )
}