javascript - 无法在 React js 中设置必填字段

Question

我使用帮助 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);

标签： javascriptreactjsformik

Answer 1

required是一个布尔属性。尝试仅required在 textarea 中编写，例如：

<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。