如何根據數據掛鈎顯示內容？

Question

我不明白為什么我的代碼沒有在我的表單中顯示我想要的條目。 當我的用戶輸入已在使用的電話號碼時，我想顯示帶有危險消息的無效條目。

我檢查了用戶輸入並檢查了 Boolean 展示櫃。

當我輸入已使用的電話號碼時，這是我的布爾值：

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

我的代碼檢測到它的電話號碼已被使用，因此 boolean “phoneAlreadyUsed”為真。

這是我的內容的代碼：

    <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>

我的代碼顯示第二個輸入（有效），而沒有“無效反饋”中的消息。 我不明白為什么...你能幫我嗎？

Answer 1

您不必要地重復了大量代碼。 在您的情況下，所有不同的是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>
);