Question

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

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

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

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>

我的代码显示第二个输入（有效），而没有消息“ invalid-feedback”。我不明白为什么... 你能帮我吗？

Answer 1

您不必要地复制了很多代码。在您的情况下，所有不同之处只是className组件的Input道具。您可以轻松构建它：

//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>
);

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

1 个答案: