[英]How to style a phone number input in React?
I'm using a custom React phone number input field from this link , not sure how to style it to become a bit similar to my other inputs, which you can probably see them in this demo:我正在使用此链接中的自定义 React 电话号码输入字段,不确定如何将其样式设置为与我的其他输入有点相似,您可能会在此演示中看到它们:
I'm copying the related code in below, I should probably add some styling in here:我正在复制下面的相关代码,我可能应该在这里添加一些样式:
<PhoneInput
name = "phoneNumber"
type = "text"
country={'us'}
enableAreaCodes={true}
onlyCountries={['us']}
areaCodes={{us: ['999']}}
inputProps={{
name: 'phone',
country:'us',
required: true,
autoFocus: true
}}
value={this.state.phone}
onChange={this.handleOnChange}
/>
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: "" };
handleOnChange = value => {
console.log(value);
this.setState({ phone: value }, () => {
console.log(this.state.phone);
});
};
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 />
<PhoneInput
name = "phoneNumber"
type = "text"
country={'us'}
enableAreaCodes={true}
onlyCountries={['us']}
areaCodes={{us: ['999']}}
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"
required />
<Input name = "eligibleAge"
type = "checkbox"
label = "I agree"
value = "unchecked"
/>
<Button primary> Submit </Button>
</Form>
</section>
);
}
}
(Thanks! I'm new to React.) (谢谢!我是 React 的新手。)
According to the document , you can pass in class names and inline styles as props to each of the elements.根据文档,您可以将类名和内联样式作为道具传递给每个元素。 It would look something like:
它看起来像:
<PhoneInput
...
containerClass="my-container-class"
inputClass="my-input-class"
containerStyle={{
border: "10px solid black"
}}
inputStyle={{
background: "lightblue"
}}
/>
Here is my CodeSandbox .这是我的CodeSandbox 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.