[英]How can I display content according to data hooks?
I do not understand why my code does not display the entry I want in my form.我不明白为什么我的代码没有在我的表单中显示我想要的条目。 I want to display an invalid entry with a danger message when my user enters a phone number already in use.当我的用户输入已在使用的电话号码时,我想显示带有危险消息的无效条目。
I check the user input and check the Boolean display cases.我检查了用户输入并检查了 Boolean 展示柜。
This is my booleans when I enter a phone number already used:当我输入已使用的电话号码时,这是我的布尔值:
phoneAlreadyUsed: true
phoneCharged: false
phoneTouched: true
phoneValid: true
My code has detected that it phone number is already in use, so the boolean "phoneAlreadyUsed" is true.我的代码检测到它的电话号码已被使用,因此 boolean “phoneAlreadyUsed”为真。
This the code of my content:这是我的内容的代码:
<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>
My code display the second input (valid) without the message in "invalid-feedback".我的代码显示第二个输入(有效),而没有“无效反馈”中的消息。 I don't understand why... Could you help me please?我不明白为什么...你能帮我吗?
You are unnecessarily duplicating a lot of code.您不必要地重复了大量代码。 All that is different in your cases is the className
prop of the Input
component.在您的情况下,所有不同的是Input
组件的className
属性。 You can easily construct it:您可以轻松构建它:
//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>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.