时间戳

首页 > 解决方案 > 如何根据数据挂钩显示内容？

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

问题描述

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

我检查用户输入并检查布尔显示案例。

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

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

我的代码检测到它的电话号码已被使用，因此布尔值“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>

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

标签： javascriptreactjs

解决方案

您不必要地重复了大量代码。在您的情况下，所有不同之处在于组件的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>
);

推荐阅读