无法在 React js 中设置必填字段
Unable to set required field in React js
我使用 help formik 库创建了一个联系页面。
我在 Field.js required="required" 中设置了我的字段,但现在它们不起作用。在我添加 onBlur 和 onChange 事件之前,它们作为必填字段工作。
帮我解决如何根据需要设置字段。
我不知道我哪里不见了。
这是我的 Field.js:
import React from 'react';
class Field extends React.Component{
render(){
return(
<div className="form-group">
{this.props.elementName ==='input' ?
<input className="form-control"
id={this.props.name}
type={this.props.type}
placeholder={this.props.placeholder}
required="required"
data-validation-required-message="Please enter your name."
name={this.props.name}
onChange={this.props.onChange}
onBlur={this.props.onBlur}
/>
:
<textarea className="form-control"
id={this.props.name}
placeholder={this.props.placeholder}
required="required"
data-validation-required-message="Please enter a message."
name={this.props.name}
onChange={this.props.onChange}
onBlur={this.props.onBlur}
></textarea>
}
<p className="help-block text-danger">
{(this.props.touched && this.props.errors)&&
<span>this fiel is required</span>
}
</p>
</div>
)
}
}
export default Field;
这是我的 Contact.js:
import React from 'react';
import Field from '../Common/Field';
import {withFormik} from "formik";
const fields={
section:[
[
{name:'name', elementName:'input',type:'text',placeholder:'Your name'},
{name:'email', elementName:'input',type:'emai',placeholder:'Your email'},
{name:'phone', elementName:'input',type:'text',placeholder:'Your phone number'}
],
[
{name:'message', elementName:'textarea',type:'text',placeholder:'type your message'}
]
]
}
class Contact extends React.Component{
submitForm=(e)=>{
alert("form submitted. thank you!");
}
render(){
return(
<section className="page-section" id="contact">
<div className="container">
<div className="text-center">
<h2 className="section-heading text-uppercase">Contact Us</h2>
<h3 className="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<form id="contactForm" name="sentMessage" novalidate="novalidate">
<div className="row align-items-stretch mb-5">
{fields.section.map((section,sectionIndex)=>{
return(
<div className='col-md-6' key={sectionIndex}>
{section.map((field,i)=>
{
return <Field {...field} key={i}
value={this.props.values[field.name]}
name={field.name}
onChange={this.props.handleChange}
onBlur={this.props.onBlur}
touched={(this.props.touched[field.name])}
errors={this.props.errors[field.name]}
/>
})}
</div>
)
})}
</div>
<div className="text-center">
<div id="success"></div>
<button className="btn btn-primary btn-xl text-uppercase"
id="sendMessageButton" type="submit"
onClick={e =>this.submitForm(e)}
>Send Message</button>
</div>
</form>
</div>
</section>
)
}
}
export default withFormik({
mapPropsToValues:()=>({
name:'',
email:'',
phone:'',
message:'',
}),
validate:values =>{
const errors={};
Object.keys(values).map(v =>{
if(!values[v]){
errors[v]= "Required";
}
})
return errors;
},
handleSubmit: (values,{setSubmitting})=>{
alert("You submitted the form");
}
})(Contact);
required
是一个 bool attribute。尝试在 textarea 中只写 required
,例如:
<textarea className="form-control"
id={this.props.name}
placeholder={this.props.placeholder}
required
data-validation-required-message="Please enter a message."
name={this.props.name}
onChange={this.props.onChange}
onBlur={this.props.onBlur}
></textarea>
input
也是如此。
所以对我来说 required="required" 工作正常。
我的问题在 Contact.js 。
在行 onBlur={this.props.onBlur}
中,这应该是 onBlur={this.props.handleBlur}
<div className='col-md-6' key={sectionIndex}>
{section.map((field,i)=>
{
return <Field {...field} key={i}
value={this.props.values[field.name]}
name={field.name}
onChange={this.props.handleChange}
onBlur={this.props.handleBlur}
touched={(this.props.touched[field.name])}
errors={this.props.errors[field.name]}
/>
})}
</div>
我使用 help formik 库创建了一个联系页面。 我在 Field.js required="required" 中设置了我的字段,但现在它们不起作用。在我添加 onBlur 和 onChange 事件之前,它们作为必填字段工作。 帮我解决如何根据需要设置字段。 我不知道我哪里不见了。 这是我的 Field.js:
import React from 'react';
class Field extends React.Component{
render(){
return(
<div className="form-group">
{this.props.elementName ==='input' ?
<input className="form-control"
id={this.props.name}
type={this.props.type}
placeholder={this.props.placeholder}
required="required"
data-validation-required-message="Please enter your name."
name={this.props.name}
onChange={this.props.onChange}
onBlur={this.props.onBlur}
/>
:
<textarea className="form-control"
id={this.props.name}
placeholder={this.props.placeholder}
required="required"
data-validation-required-message="Please enter a message."
name={this.props.name}
onChange={this.props.onChange}
onBlur={this.props.onBlur}
></textarea>
}
<p className="help-block text-danger">
{(this.props.touched && this.props.errors)&&
<span>this fiel is required</span>
}
</p>
</div>
)
}
}
export default Field;
这是我的 Contact.js:
import React from 'react';
import Field from '../Common/Field';
import {withFormik} from "formik";
const fields={
section:[
[
{name:'name', elementName:'input',type:'text',placeholder:'Your name'},
{name:'email', elementName:'input',type:'emai',placeholder:'Your email'},
{name:'phone', elementName:'input',type:'text',placeholder:'Your phone number'}
],
[
{name:'message', elementName:'textarea',type:'text',placeholder:'type your message'}
]
]
}
class Contact extends React.Component{
submitForm=(e)=>{
alert("form submitted. thank you!");
}
render(){
return(
<section className="page-section" id="contact">
<div className="container">
<div className="text-center">
<h2 className="section-heading text-uppercase">Contact Us</h2>
<h3 className="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<form id="contactForm" name="sentMessage" novalidate="novalidate">
<div className="row align-items-stretch mb-5">
{fields.section.map((section,sectionIndex)=>{
return(
<div className='col-md-6' key={sectionIndex}>
{section.map((field,i)=>
{
return <Field {...field} key={i}
value={this.props.values[field.name]}
name={field.name}
onChange={this.props.handleChange}
onBlur={this.props.onBlur}
touched={(this.props.touched[field.name])}
errors={this.props.errors[field.name]}
/>
})}
</div>
)
})}
</div>
<div className="text-center">
<div id="success"></div>
<button className="btn btn-primary btn-xl text-uppercase"
id="sendMessageButton" type="submit"
onClick={e =>this.submitForm(e)}
>Send Message</button>
</div>
</form>
</div>
</section>
)
}
}
export default withFormik({
mapPropsToValues:()=>({
name:'',
email:'',
phone:'',
message:'',
}),
validate:values =>{
const errors={};
Object.keys(values).map(v =>{
if(!values[v]){
errors[v]= "Required";
}
})
return errors;
},
handleSubmit: (values,{setSubmitting})=>{
alert("You submitted the form");
}
})(Contact);
required
是一个 bool attribute。尝试在 textarea 中只写 required
,例如:
<textarea className="form-control"
id={this.props.name}
placeholder={this.props.placeholder}
required
data-validation-required-message="Please enter a message."
name={this.props.name}
onChange={this.props.onChange}
onBlur={this.props.onBlur}
></textarea>
input
也是如此。
所以对我来说 required="required" 工作正常。
我的问题在 Contact.js 。
在行 onBlur={this.props.onBlur}
中,这应该是 onBlur={this.props.handleBlur}
<div className='col-md-6' key={sectionIndex}>
{section.map((field,i)=>
{
return <Field {...field} key={i}
value={this.props.values[field.name]}
name={field.name}
onChange={this.props.handleChange}
onBlur={this.props.handleBlur}
touched={(this.props.touched[field.name])}
errors={this.props.errors[field.name]}
/>
})}
</div>