Javascript 如何根据数据挂钩显示内容？

我不明白为什么我的代码没有在表单中显示我想要的条目。 当我的用户输入一个已经在使用的电话号码时，我想显示一个带有危险信息的无效条目

我检查用户输入并检查布尔显示情况

当我输入已使用的电话号码时，这是我的布尔值：

phoneAlreadyUsed: true
phoneCharged: false
phoneTouched: true
phoneValid: true

我的代码检测到它的电话号码已经在使用中，因此布尔值“phoneAlreadyUsed”为true

这是我的内容的代码：

    <FormGroup className="form-group">
      <Label>Phone *</Label>
      {userVerification.phoneTouched === false && userVerification.phoneAlreadyUsed === false && (
        <Input
          type="text"
          name="phone"
          className="form-control"
          value={user ? user.phone : ''}
          placeholder={'Enter your phone number'}
          onChange={handleChange}
        />
      )}
      {userVerification.phoneValid === true && userVerification.phoneAlreadyUsed === false && (
        <Input
          type="text"
          name="phone"
          className="form-control is-valid"
          value={user ? user.phone : ''}
          placeholder={'Enter your phone number'}
          onChange={handleChange}
        />
      )}
      {((userVerification.phoneValid === false && userVerification.phoneTouched === true) ||
        userVerification.phoneAlreadyUsed === true) && (
        <Input
          type="text"
          name="phone"
          className="form-control is-invalid"
          value={user ? user.phone : ''}
          placeholder={'Enter your phone number'}
          onChange={handleChange}
        />
      )}
      {userVerification.phoneAlreadyUsed === true && (
        <div class="invalid-feedback">Sorry, this phone number's taken. Try another?</div>
      )}
    </FormGroup>

电话*
{userVerification.phoneTouched==false&&userVerification.phoneAlreadyUsed===false&&(
)}
{userVerification.phoneValid==true&&userVerification.phoneAlreadyUsed===false&&(
)}
{（（userVerification.phoneValid==false&&userVerification.phoneTouched==true）||
userVerification.phoneAlreadyUsed===true）和(
)}
{userVerification.phoneAlreadyUsed===true&&(
抱歉，此电话号码已被占用。请再试一个？
)}

我的代码显示第二个输入（有效），但“无效反馈”中没有消息。我不明白为什么。。。

---

你能帮帮我吗？

你不必要地重复了很多代码。在您的情况下，所有不同之处在于

Input

组件的

className

属性。您可以轻松构建它：

//in render

const {phoneTouched, phoneValid, phoneAlreadyUsed} = userVerification;
let className = 'form-control';

if (phoneTouched) {
    const valid = phoneValid && !phoneAlreadyUsed;
    className += valid ? 'is-valid' : 'is-invalid';
}

return (
    <FormGroup className="form-group">
        <Label>Phone *</Label>
        <Input
          type="text"
          name="phone"
          className={className}
          value={user ? user.phone : ''}
          placeholder={'Enter your phone number'}
          onChange={handleChange}
        />
        {phoneAlreadyUsed && (
            <div class="invalid-feedback">
                Sorry, this phone number's taken. Try another?
            </div>
        )}
    </FormGroup>
);

//在渲染中
const{phoneTouched，phoneValid，phoneAlreadyUsed}=userVerification；
让className='formcontrol'；
如果（电话）{
const valid=phoneValid&！phoneAlreadyUsed；
className+=valid？'is valid'：'is invalid'；
}
返回(
电话*
{phoneAlreadyUsed&&(
抱歉，此电话号码已被占用。请再试一个？
)}
);