在变更模糊时进行表单验证，并提交表单和字段

Question

 // App.js import React, { Component } from 'react'; import './App.css'; import fields from './fields' import CustomInputType from './custominputtype' class App extends Component { state = { formData: {}, fieldErrorStatus: {}, submitErrorStatus: false } handleChange = (e) => { // adding the new on change value to the corresponding field name const { name, value } = e.target; const tempObj = { ...this.state.formData }; tempObj[name] = value; this.setState({ formData: tempObj }); // adding the error status for the corresponding field name let tempErrorStatus = { ...this.state.fieldErrorStatus } tempErrorStatus[name] = false; this.setState({ fieldErrorStatus: tempErrorStatus }) }; handleSubmit = (e) => { let formValues = this.state.formData; if (Object.keys(formValues).length === 0) { this.setState({ submitErrorStatus: true }) } else { let tempErrorStatus = {}; this.setState({ submitErrorStatus: false }); Object.keys(formValues).forEach(key => { if (formValues[key]) { tempErrorStatus[key] = false; } }) this.setState(prevState => { return { fieldErrorStatus: { ...prevState.fieldErrorStatus, tempErrorStatus } } }) } e.preventDefault(); } render() { return ( <div className="form"> <form onSubmit={this.handleSubmit} onChange={(e) => this.handleChange(e)} > <div className="inputs-collection"> { fields[0].attributes.map((field, i) => { return ( <CustomInputType attributes={field} key={i} value={this.state.formData[i]} obj={this.state.formData} errorStatus={this.state.fieldErrorStatus} displayError={this.state.submitErrorStatus} /> ) }) } </div> <div className="button-container"> <button className="submit-button" type="submit">Submit Details</button> </div> </form> </div> ) } } export default App; // CustomInputType import React , {Component} from 'react' class CustomInputType extends Component { render(){ const { attributes: { id, name, dataType, } = {}, displayError, obj, errorStatus } = this.props; return ( <div className="input-container"> <label htmlFor={id}> {name} </label> <input type={dataType} name={name || ''} value={obj[name]} id={id} /> { displayError || Boolean(errorStatus[name]) ? <span>{`Error on ${name}`}</span> : null } </div> ) } } export default CustomInputType // fields let fields = [ { "id": "1", "name": "Form 1", "type": "Dynamic Form", "attributes": [ { "name": "First Name", "dataType": "String", "id": 101, }, { "name": "Surname", "dataType": "String", "id": 102, }, { "name": "Phone Number", "dataType": "Number", "id": 103, }, { "name": "Roll Number", "dataType": "Number", "id": 104, } ] } ]; export default fields; 

i have a parent component , where i am reading a json file locally and rendering the fields, basically i have a child component which is a custom input type component.

in my child component there is an prop called error it is a boolean value. So if it is true it will show a red box around the field. The cases i need to show the red box are onChange , onBlur and submit. for sumbit i am using submitErrorStatus variable in state, and for handleChange and onBlur using fieldErrorStatus. So when the user directly submit without any fields entering redbox should come, once he types each field or blur the redbox should go.

i have done the below but some where it is confusing.

Parent Component

state = { 
      formData : {},
      fieldErrorStatus : {},
      submitErrorStatus : false
    }

 handleChange = (e) => {
        // adding the new on change value to the corresponding field name
        const { name, value} = e.target;
        const tempObj = {...this.state.formData};
        tempObj[name] = value;
        this.setState({ formData:tempObj });

        // adding the error status for the corresponding field name
        let tempErrorStatus = {...this.state.fieldErrorStatus}
        tempErrorStatus[name] = false;
        this.setState({fieldErrorStatus:tempErrorStatus})

    };


handleSubmit = (e) => {

        let formValues = this.state.formData;

        if(Object.keys(formValues).length === 0){
            this.setState({submitErrorStatus: true})
        }
        else{
            let tempErrorStatus = {};

            this.setState({submitErrorStatus: false});
            Object.keys(formValues).forEach(key => {
                if(formValues[key]){
                    tempErrorStatus[key] = false;
                }
            })
            this.setState(prevState => {
                return {
                    fieldErrorStatus: {...prevState.fieldErrorStatus, tempErrorStatus}
                }
            })
        }

        e.preventDefault();
    }

    render(){
      <div className = "form">
                        <form 
                            onSubmit = {this.handleSubmit} 
                            onChange = {(e) => this.handleChange(e)}
                            >
                            <div className = "inputs-collection">
                            {
                                fields.map((field, i) => {
                                    return (
                                        <InputTypes 
                                            attributes = {field} 
                                            key = {i}                                 
                                            value = {this.state.formData[i]}
                                            obj = {this.state.formData}
                                            errorStatus = {this.state.fieldErrorStatus}
                                            displayError = {this.state.submitErrorStatus}
                                        />
                                    )                                                            
                                })
                            }
                            </div>
                            <div className = "button-container">
                                <button  className = "submit-button" type = "submit">Submit Details</button>
                            </div>
                        </form> 
                    </div> 

}

Child Component

render(){
   const {
            attributes : {
                id,
                name,
                dataType,
                rules,            
            } = {}, 
            displayError,
            obj,
            errorStatus
        } = this.props;

 return(
 <div className="input-container">

                <Input 
                    type = {dataType} 
                    id = {id.toString()}
                    name = {name || ''}
                    value = {obj[name]}
                    error={displayError || errorStatus[name] ? false : true} />



            </div>
)
}

Answer 1

So I made you some basic components which you can use as a reference. I've implemented the onChange and onBlur method. I also made an easily accessible error message but I didn't create the onSubmit functions as you just have to map the array while comparing for empty inputs.

Here is my code:

Container:

 import React, { Component } from 'react'; import Field from './Field'; export default class Container extends Component { state = { // Create fields fields: [ { key: "0", errorMessage: 'Error message for field: 0', isValid: true }, { key: "1", errorMessage: 'Error message for field: 1', isValid: true }, { key: "2", errorMessage: 'Error message for field: 2', isValid: true }, { key: "3", errorMessage: 'Error message for field: 3', isValid: true }, { key: "4", errorMessage: 'Error message for field: 4', isValid: true } ] } render() { return this.state.fields.map((field, i) => { return <Field key={field.key} isValid={field.isValid} onChange={this.onInputChange} index={i} /> }); } onInputChange = (index, event) => { let newState = this.state; if(event.target.value === '') { // Set field invalid newState.fields[index].isValid = false; // In this case log but you could do other stuff with the message console.log(this.state.fields[index].errorMessage); } else { // Set field valid newState.fields[index].isValid = true; } this.setState(newState); } } 

Input:

 import React, { Component } from 'react'; export default class Field extends Component { render() { // Get props const {isValid, onChange, index} = this.props; return <input type="text" // Check the input onInput={event => onChange(index, event)} onBlur={event => onChange(index, event)} // If invalid make the background red style={{backgroundColor: isValid ? 'white' : 'red'}} /> } } 

I hope it helps =)