React 16 and ES6 Get data from child form-CodePudding

I create ChildComponent form and I use submit to send data to ParentComponent state. But I can`t clear form field after sending. How can I fix this? Is there another way to send data?

Child Component:

import React, { Component } from 'react';

class ChildComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: ""
        }
    }

    onChangeName = (e) => {
        this.setState({ name: e.target.value })
    }

    render() {
        return (
            <form onSubmit={this.props.submitFormUser(this.state)}>
                <input type="text" name="text" value={this.state.name} onChange={this.onChangeName} />
                <button type='submit'>submit</button>
            </form>
        );
    }
}

export default ChildComponent;

Parent Component:

import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: 0,
            name: ""
        }
    }

    getDataChild = (data) => (e) => {
        this.setState(prevState => ({
            id: prevState.id   1,
            name: data.name
        }))
        e.preventDefault();
    }

    render() {
        return (
            <ChildComponent id={this.state.id} submitForm={this.getDataChild} />
        );
    }
}

export default ParentComponent;

CodePudding user response：

You need to pass a method as a props from the parent component to the child component as per your example.

After submitting the form clear the form values, and you need to do some stuff. You need to pass a callback method and after submitting you need to call that method fro clearing the fields values or reset the form.

Example

ParentComponent

import React, { Component } from "react";
import ChildComponent from "./ChildComponent";

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: 0,
      name: ""
    };
  }

  getDataChild = (data, resetFormValue) => {
    this.setState((prevState) => ({
      id: prevState.id   1,
      name: data.name
    }));
    resetFormValue();
  };

  render() {
    return <ChildComponent id={this.state.id} submitForm={this.getDataChild} />;
  }
}

export default ParentComponent;

ChildComponent

import React, { Component } from "react";

class ChildComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ""
    };
  }

  onChangeName = (e) => {
    this.setState({ name: e.target.value });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.submitForm(this.state, this.resetFormValue);
  };

  resetFormValue = () => {
    this.setState({ name: "" });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          name="text"
          value={this.state.name}
          onChange={this.onChangeName}
        />
        <button type="submit">submit</button>
      </form>
    );
  }
}

export default ChildComponent;

Demo

CodePudding user response：

On submit button click, instead of calling the parent method directly, you can first call local method which will internally call the parent component method and then have logic to clear the child component state as shown below :

import React, { Component } from 'react';
class ChildComponent extends Component {
constructor(props) {
    super(props);
    this.state = {
        name: ""
    }
}

onChangeName = (e) => {
    this.setState({ name: e.target.value })
}
onSubmitHandler = (e) =>{
    this.props.submitFormUser(this.state)
    this.setState({ name: ``})
}

render() {
    return (
        <form onSubmit={(e)=> onSubmitHandler(e)}>
            <input type="text" name="text" value={this.state.name} onChange={this.onChangeName} />
            <button type='submit'>submit</button>
        </form>
    );
  }
}
export default ChildComponent;