Question

在下面的屏幕截图中，我将字段设为必填字段，因此单击“注册”按钮。如果有任何字段，那么我想在React中用红色边框突出显示该空白字段。（https://blueprintjs.com/docs/#core/components/text-inputs）

constructor(props) {
    super(props);
    this.state = {
        firstName: '',
        lastName: '',
        email: '',
        password: '',
    };
    this.handleChange = this.handleChange.bind(this);
    this.registerForm = this.registerForm.bind(this);
}

handleChange(event) {
    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("registration successfully..!!"); 
    }else{
         console.log("all * marked fields mandatory");
    }
}

render() {
  return (
    <div>
      <h2>Fill Registration Details..!!</h2>
        <InputGroup placeholder="Enter First Name...*"            
          name="firstName" value={this.state.firstName} onChange={this.handleChange}/>

        <InputGroup placeholder="Enter Last Name...*" name="lastName" 
         value={this.state.lastName} onChange={this.handleChange}/>

        <InputGroup placeholder="Enter your email...*" name="email"
         value={this.state.email} onChange={this.handleChange}/>

        <InputGroup placeholder="Enter your password...*"name="password" 
         value={this.state.password} onChange={this.handleChange}/>

        <Button intent="Primary" onClick={this.registerForm}>Register</Button>
       </div>
    )
  }

Answer 1

您可以创建一个CSS类-假设Couldn't match expected type ‘f’ with actual type ‘One’ ‘f’ is a rigid type variable bound by the type signature for: makePoly :: forall f. Bool -> Poly f并将其添加到输入中，只要它们的值为空（您的组件需要能够使用此className属性并将其传递给您的{{1} }本机组件）

.red-border

尽管最好将此类内容保留在<input />组件中，从而将组件的逻辑限制在单个文件中

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

Answer 2

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

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

然后，您可以将其与以下显示红色边框（例如）的CSS一起使用：

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

另一种方法是使用required标签的本机input属性，但是这种方法很难自定义：

<input type='text' required/>

https://www.w3schools.com/tags/att_input_required.asp

Answer 3

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

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;

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

3 个答案: