javascript - 如何获取用户输入值并在 React 中基于该值显示另一个元素?
问题描述
我正在尝试显示一个复选框(“我同意”),例如一个 18 岁以下的用户,否则不显示该复选框。
如果用户未满 18 岁,我写了一个handleAgreementCheckbox
应该返回布尔值 ( true
, false
) 的代码,不确定如何获取元素值并显示复选框。
我如何在 React 中做到这一点?
代码
import React from 'react'
import {
Form,
Field
} from 'react-advanced-form'
import {
Input,
Button
} from 'react-advanced-form-addons'
export default class RegistrationForm extends React.Component {
registerUser = ({
serialized,
fields,
form
}) => {
return fetch('https://backend.dev', {
body: JSON.stringify(serialized)
})
}
handleAgreementCheckbox = () => {
const currentTime = new Date();
const eligibleUserDOB = new Date(currentTime.getFullYear() - 18, currentTime.getMonth(), currentTime.getDate());
return currentTime>= eligibleUserDOB;
};
render() {
return (
<section className = "container">
<Form action = {
this.registerUser
}
onSubmitStart = {
this.props.onSubmitStart
}>
<Input name = "firstName"
label = "First name"
required = {
({
get
}) => {
return !!get(['lastName', 'value'])
}
}/>
<Input name = "lastName"
label = "Last name"
required = {
({
get
}) => {
return !!get(['firstName', 'value'])
}
}
/>
<Input name = "emailAddress"
type = "email"
label = "Email Address"
required />
<Input name = "phoneNumber"
type = "text"
label = "Phone Number"
required />
<Input name = "dateOfBirth"
type = "date"
label = "Date of Birth"
required />
<Input name = "eligibleAge"
type = "checkbox"
label = "I agree"
value = "unchecked"
/>
<Button primary> Submit </Button>
</Form>
</section>
);
}
}
(谢谢!我是 React 新手。)
代码沙盒演示
解决方案
好的,首先创建一个状态来保持资格的真假条件。然后在您的 handleAgreementCheckbox 方法中设置该状态。最后使用资格状态根据真或假有条件地呈现复选框。
/**
* Registration form.
* The component we have built together as the part of
* React Advanced Form presentation on Medium.
*/
import React, { useState } from "react";
import { Form, Field } from "react-advanced-form";
import { Input, Button } from "react-advanced-form-addons";
// import 'react-phone-number-input/style.css'
// import PhoneInput from 'react-phone-number-input'
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
export default class RegistrationForm extends React.Component {
registerUser = ({ serialized, fields, form }) => {
return fetch("https://backend.dev", {
body: JSON.stringify(serialized)
});
};
state = { phone: "", eligible: false };
handleOnChange = value => {
console.log(value);
this.setState({ phone: value }, () => {
console.log(this.state.phone);
});
};
handleAgreementCheckbox = event => {
let selectedDate = event.nextValue; //======> fetch selected date and split it to pass into date object.
selectedDate = selectedDate.split("-");
console.log(selectedDate);
const currentTime = new Date();
const eligibleUserDOB = new Date(
selectedDate[0],
selectedDate[1] - 1,
selectedDate[2]
);
console.log(currentTime, eligibleUserDOB);
console.log(currentTime > eligibleUserDOB);
if (currentTime >= eligibleUserDOB) { //====> on greater set eligible to true
this.setState({ eligible: true });
} else { //====> on less set eligible to false
console.log(this.state);
this.setState({ eligible: false });
}
return currentTime >= eligibleUserDOB;
};
render() {
return (
<section className="container">
<Form
action={this.registerUser}
onSubmitStart={this.props.onSubmitStart}
>
<Input
name="firstName"
label="First name"
required={({ get }) => {
return !!get(["lastName", "value"]);
}}
/>
<Input
name="lastName"
label="Last name"
required={({ get }) => {
return !!get(["firstName", "value"]);
}}
/>
<Input
name="emailAddress"
type="email"
label="Email Address"
required
/>
<PhoneInput
name="phoneNumber"
type="text"
country={"us"}
enableAreaCodes={true}
onlyCountries={["us"]}
areaCodes={{ us: ["332"] }}
inputProps={{
name: "phone",
country: "us",
required: true,
autoFocus: true
}}
value={this.state.phone}
onChange={this.handleOnChange}
required
/>
<Input
name="dateOfBirth"
type="date"
label="Date of Birth"
onChange={this.handleAgreementCheckbox}
required
/>
{this.state.eligible && ( //===========> print the state here and change time to see it in working. It will display the check on true and hide on false
<Input
name="eligibleAge"
type="checkbox"
label="I agree"
value="unchecked"
/>
)}
<Button primary> Submit </Button>
</Form>
</section>
);
}
}
// <PhoneInput
// country="US"
// value={this.phoneNumberValidation.value}
// onChange={this.phoneNumberValidation.setValue} />
工作演示在这里
推荐阅读
- android - android googleMap - 如何添加没有工具提示箭头的信息窗口
- windows - Windows Server 2012 可以通过 mstsc 远程但无法 ping
- angular - 无法读取未定义的属性“显示”。照片浏览器
- c++ - ODBC SQLBindCol() 有错误的指针,但它可以工作。这怎么可能?
- rxjs - rxjs:如何理解这种 combinelastest 行为
- angularjs - foreach 到 angularjs 中的 foreach 数组
- php - 遍历具有动态/未知维度的多维数组
- c# - 创建公共财产清单
在 ParentUc C# Winform 中? - python - 当我在 kivy 中运行程序“Hello World”时没有显示文本,为什么?
- python - 使用 Python 读取 JSON 文件