Javascript 如何突出显示带有红色边框的空必填（*）输入字段单击React中的按钮？

在下图截图中，我将字段设置为必填字段，因此，如果有字段，请单击“注册”按钮，然后在“如何可能”中用红色边框突出显示该空字段？ （）

构造函数（道具）{
超级（道具）；
此.state={
名字：''，
姓氏：“”，
电子邮件：“”，
密码：“”，
};
this.handleChange=this.handleChange.bind（this）；
this.registerForm=this.registerForm.bind（this）；
}
手变（活动）{
this.setState（{[event.target.name]：event.target.value}）；
}
registerForm（）{
if（this.state.firstName.trim（）&&this.state.lastName.trim（）&&
this.state.email&&this.state.password）{
console.log（“注册成功..！！”；
}否则{
console.log（“所有*标记字段必填”）；
}
}
render（）{
返回(
填写注册详情。。！！
登记
)
}

您可以创建一个CSS类，比如说

.red border

并在其值为空时将其添加到您的输入中（您的组件需要能够使用此className prop并将其传递给您的

本机组件）

---

您可以创建一个CSS类，比如说

.red border

，并在其值为空时将其添加到您的输入中（您的组件需要能够使用此className prop并将其传递给您的

本机组件）

---

如@Saraband所述，一种解决方案是根据输入字段是否包含错误修改节点的类名：

<InputGroup
  placeholder="Enter your password...*"
  name="password"
  className={this.state.password.length ? '' : 'error'}
  value={this.state.password}
  onChange={this.handleChange}
  />

另一种方法是使用

input

标记的本机

required

属性，但这种方法很难自定义：

<input type='text' required/>

---

正如@Saraband所述，一种解决方案是根据输入字段是否包含错误来修改节点的类名：

<InputGroup
  placeholder="Enter your password...*"
  name="password"
  className={this.state.password.length ? '' : 'error'}
  value={this.state.password}
  onChange={this.handleChange}
  />

另一种方法是使用

input

标记的本机

required

属性，但这种方法很难自定义：

<input type='text' required/>

对于那些可能正在寻找此问题的解决方案的人，只有在单击“提交”按钮后，下面的解决方案才会生效。可以添加自定义css类来设置输入标记的样式

import React，{useState}来自“React”；
常量ValidateInput=（）=>{
//默认情况下，将isSubmitting设置为false
//这将确保默认情况下未添加错误类
const[isSubmitting，setIsSubmitting]=useState（false）；
常量[inputValue，setInputValue]=useState（“”）；
常量submitHandler=（事件）=>{
event.preventDefault（）；
//这将触发错误验证
设置提交（真）；
//在这里添加其余的逻辑
};
返回(
{
setInputValue（event.target.value）；
}}
className={isSubmitting&！inputValue？'错误：未定义}
/>
提交
);
};
导出默认验证输入；

对于那些可能正在寻找此问题的解决方案的人，只有在单击“提交”按钮后，下面的解决方案才会生效。可以添加自定义css类来设置输入标记的样式

import React，{useState}来自“React”；
常量ValidateInput=（）=>{
//默认情况下，将isSubmitting设置为false
//这将确保默认情况下未添加错误类
const[isSubmitting，setIsSubmitting]=useState（false）；
常量[inputValue，setInputValue]=useState（“”）；
常量submitHandler=（事件）=>{
event.preventDefault（）；
//这将触发错误验证
设置提交（真）；
//在这里添加其余的逻辑
};
返回(
{
setInputValue（event.target.value）；
}}
className={isSubmitting&！inputValue？'错误：未定义}
/>
提交
);
};
导出默认验证输入；

您是否创建了CSS类？同样重要的是，您的

InputGroup

组件知道如何将该类名传递给其内部

input

本机组件。你也可以发布你的ÌnputGroup`组件的代码吗？另外，这个线程可能会帮助你：Saraband我想在点击按钮时高亮显示，如果字段为空，但它已经高亮显示如果为空请给我解决方案我需要帮助当我点击按钮时字段为空，那么我想用红色边框高亮显示，而不是空时间高亮显示点击按钮请给我解决方案你创建了CSS类吗？同样重要的是，您的

InputGroup

组件知道如何将该类名传递给其内部

input

本机组件。你也可以发布你的ÌnputGroup`组件的代码吗？另外，这个线程可能会帮助你：Saraband我想在点击按钮时高亮显示，如果字段为空，但它已经高亮显示如果为空请给我解决方案我需要帮助当我点击按钮时字段为空，那么我想用红色边框高亮显示，而不是空时间高亮显示点击按钮请给我解决方案当点击按钮字段为空时我想高亮显示，但如果为空，它已经高亮显示我想在点击按钮字段为空时高亮显示，但如果为空，它已经高亮显示

.error input
{
    border-bottom: 1px solid #eb516d;
}

<input type='text' required/>

import React, { useState } from 'react';

const ValidateInput = () => {
  // set isSubmitting to false by default
  // this will make sure error class is not added by default
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [inputValue, setInputValue] = useState('');

  const submitHandler = (event) => {
    event.preventDefault();
    // this will trigger the error validation
    setIsSubmitting(true);
    // add the rest of the logic here
  };
  return (
    <form onSubmit={submitHandler}>
      <input
        value={inputValue}
        onChange={(event) => {
          setInputValue(event.target.value);
        }}
        className={isSubmitting && !inputValue ? 'error' : undefined}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default ValidateInput;