admin管理员组文章数量:1331849
I'm using a custom React phone number input field from this link, not sure how to style it to bee a bit similar to my other inputs, which you can probably see them in this demo:
Demo
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}
/>
Code
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('', {
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.)
I'm using a custom React phone number input field from this link, not sure how to style it to bee a bit similar to my other inputs, which you can probably see them in this demo:
Demo
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}
/>
Code
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.)
Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Mar 14, 2020 at 20:44 EmmaEmma 27.8k11 gold badges48 silver badges71 bronze badges 2- with CSS? Are you asking for a CSS sheet, or how to style a React ponent? There is a lot of unrelated noise in the code here. – JulienD Commented Mar 14, 2020 at 21:08
- 1 This must be it: npmjs./package/react-phone-input-2#style – JulienD Commented Mar 14, 2020 at 21:11
1 Answer
Reset to default 4According 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.
本文标签: javascriptHow to style a phone number input in ReactStack Overflow
版权声明:本文标题:javascript - How to style a phone number input in React? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742215139a2434430.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论