Question

我只想在输入为空时添加红色边框。我在React中找不到“ addClass”的方法，所以我正在使用状态。现在，该代码将为所有输入添加红色边框，即使它具有文本。

状态：

this.state = {
  inputBorderError: false,
};

HTML / JSX：

<label>Name</label>
<input className={
  this.state.inputBorderError ? 'form-input form-input-fail' : 'form-input'
} />

<label>Email</label>
<input className={
  this.state.inputBorderError ? 'form-input form-input-fail' : 'form-input'
} />

<label>Message</label>
<textarea className={
  this.state.inputBorderError ? 'form-input form-input-fail' : 'form-input'
} />

CSS：

.form-input-fail {
  border: 1px solid red;
}

JS：

   let inputFields = document.getElementsByClassName('form-input');

   for (var i = 0; i < inputFields.length; i++) {
      if (inputFields[i].value === '') {
        this.setState({
          inputBorderError: true,
        });
      }
    }

我在代码中看到错误，因为它基本上是在发现空输入时将状态设置为true。我认为我可能会错误地处理此问题，因为只有一种状态。是否有基于我的州方法的解决方案，还是有其他解决方案？

Answer 1

现在，您具有影响所有输入的单个状态值，您应该考虑为每个HANDLE hConsole = GetStdHandle(STD_OUTPUT_HANDLE); SetConsoleTextAttribute(hConsole, color); cout << text;使用一个状态值。另外，您的输入不受控制，因此将很难记录和跟踪其值以进行错误处理。

优良作法是为每个input标签赋予一个name属性。使其更容易动态更新其相应的状态值。

尝试如下操作，开始在每个输入中键入内容，然后删除文本：https://codesandbox.io/s/nervous-feynman-vfmh5

input

Answer 2

您是正确的，只有一种状态。

您需要做的是为每个输入存储一个单独的错误。一种方法是使用状态为state = {errors: []}的集合或数组，然后检查

<label>Name</label>
<input className={
  this.state.errors.includes('name') ? 'form-input form-input-fail' : 'form-input'
} />

<label>Email</label>
<input className={
  this.state.errors.includes('email') ? 'form-input form-input-fail' : 'form-input'
} />
} />

Answer 3

您应该跟踪状态下的输入值，而不是仅检查borderStyling状态。

根据您的代码，您可以将其重构为如下形式：

// keep track of your input changes
this.state = {
  inputs: {
    email: '',
    name: '',
    comment: '',
  },
  errors: {
    email: false,
    name: false,
    comment: false,
  }
};

// event handler for input changes

handleChange = ({ target: { name, value } }) => {
    const inputChanges = {
       ...state.inputs,
       [name]: value
    }

    const inputErrors = {
       ...state.errors,
       [name]: value == ""
    }

    setState({
      inputs: inputChanges,
      errors: inputErrors,
    });
}

HTML / JSX

// the name attribut for your input

<label>Name</label>
<input name="name" onChange={handleChange} className={
  this.errors.name == "" ? 'form-input form-input-fail' : 'form-input'
} />

<label>Email</label>
<input name="email" onChange={handleChange} className={
  this.errors.email == "" ? 'form-input form-input-fail' : 'form-input'
} />

<label>Message</label>
<textarea name="comment" onChange={handleChange} className={
  this.errors.comment == "" ? 'form-input form-input-fail' : 'form-input'
} />

如果您可能希望使用CSS和js实现它，则可以尝试本文matching-an-empty-input-box-using-css-and-js

但是请尝试并学习使组件可重复使用和干燥，因为那是享受React应用程序的开始。

[修订]

反应-将类添加到空的输入字段

3 个答案: