javascript - React | pass form data from one component to another - Stack Overflow

admin管理员组

文章数量:1425932

I am developing a small React app, I'm having Files like

--Filter.js
--Result.js
--Index.js

Filter.js - Contains 2 textbox and button

Result.js - It contains the Filter.js and one P tag.

Index.js - Contains the Result.js

Filter.js:

import React, { Component } from 'react';
import { render } from 'react-dom';

export default class Filter extends Component {
  constructor(props){
    super(props);
    this.state={myName: ""}
}   

  SubmitValue = (e) => {
     this.props.handleData(this.state.myName)
  }

   onChange=(e)=>{
this.setState({myName: e.target.value})

   } 

  render() {
    return (
        <div>
        <form>
          Name: <input type="text" name="myName" onChange={this.onChange}/>
          <br />
          Email: <input type="text" name="myEmail" />
          <br /><br />
          <input type="button" value="Submit" onClick={this.SubmitValue}/>
          </form>
        </div>
    )
  }
}

ResultList.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Filter from './Filter';

import { Button, Dropdown, Input, } from 'semantic-ui-react';

export default class ResultList extends Component {
   constructor(props){
      super(props);
      this.state = {
          myName: ''
      };
    }

     handleParentData = (e) => {
this.setState({myName: e})
  }

  render() {
    return (
        <div>

        <Filter handleData={this.handleParentData}/>
 <p>{this.state.myName}</p>       

        </div>
    )
  }
}

Index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import ResultList from './Components/ResultList';
class App extends Component {

  render() {
    return (
      <div>
        <ResultList />
       </div>
    );
  }
}

render(<App />, document.getElementById('root'));

I want the Filter.js textbox values in Result.js. I can able to get one text field value to Result.js. But unable to get the both text fields values. Code link:

How to get the both text field values in Result.js?

I am developing a small React app, I'm having Files like

--Filter.js
--Result.js
--Index.js

Filter.js - Contains 2 textbox and button

Result.js - It contains the Filter.js and one P tag.

Index.js - Contains the Result.js

Filter.js:

import React, { Component } from 'react';
import { render } from 'react-dom';

export default class Filter extends Component {
  constructor(props){
    super(props);
    this.state={myName: ""}
}   

  SubmitValue = (e) => {
     this.props.handleData(this.state.myName)
  }

   onChange=(e)=>{
this.setState({myName: e.target.value})

   } 

  render() {
    return (
        <div>
        <form>
          Name: <input type="text" name="myName" onChange={this.onChange}/>
          <br />
          Email: <input type="text" name="myEmail" />
          <br /><br />
          <input type="button" value="Submit" onClick={this.SubmitValue}/>
          </form>
        </div>
    )
  }
}

ResultList.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Filter from './Filter';

import { Button, Dropdown, Input, } from 'semantic-ui-react';

export default class ResultList extends Component {
   constructor(props){
      super(props);
      this.state = {
          myName: ''
      };
    }

     handleParentData = (e) => {
this.setState({myName: e})
  }

  render() {
    return (
        <div>

        <Filter handleData={this.handleParentData}/>
 <p>{this.state.myName}</p>       

        </div>
    )
  }
}

Index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import ResultList from './Components/ResultList';
class App extends Component {

  render() {
    return (
      <div>
        <ResultList />
       </div>
    );
  }
}

render(<App />, document.getElementById('root'));

I want the Filter.js textbox values in Result.js. I can able to get one text field value to Result.js. But unable to get the both text fields values. Code link: https://stackblitz./edit/dhanapal-react-ex-1

How to get the both text field values in Result.js?

• javascript
• reactjs
• forms
• redux
• react-props

Share Improve this question Follow edited Feb 11, 2019 at 17:06 Dhanapal asked Feb 11, 2019 at 16:50 DhanapalDhanapal 38022 gold badges88 silver badges3030 bronze badges 4

• No one will visit that link, which will be dead in an internet moment anyway, making this question useless for future readers. Provide a minimal reproducible example as suggested in How to Ask. – user1531971 Commented Feb 11, 2019 at 17:02
• Added the code in the question. – Dhanapal Commented Feb 11, 2019 at 17:07
• Did you check on SO already? stackoverflow./q/38420396/1531971 among others and see if that helps. – user1531971 Commented Feb 11, 2019 at 17:11
• I looked few references but that is not helped me. I am unable to get both values – Dhanapal Commented Feb 11, 2019 at 17:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

ok, so I made some changes to your code that you can view here: https://stackblitz./edit/dhanapal-react-ex-1-8pzeks?file=index.js

In the case that the above link no longer works, here is what I changed: Filter.Js:

export default class Filter extends Component {
  constructor(props){
    super(props);

    this.state = {
      myName: ''  
    }
}   

  submitForm = (e) => {
    e.preventDefault();

    this.props.handleData(this.state)
  } 

   onChange = (e) => {
     this.setState({
       myName: e.target.value
     });
   }

  render() {
    return (
        <div>
        <form>
          Name: <input type="text" name="myName" onChange={this.onChange}/>
         <br /><br />
          <input type="button" value="Submit" onClick={this.submitForm}/>
          </form>
        </div>
    )
  }
}

and in ResultList.js:

export default class ResultList extends Component {
   constructor(props){
      super(props);

      this.state = {
          myName: ''
      };
    }

    handleParentData = (formModel) => {
      this.setState({...formModel});
    }


  render() {
    return (
        <div>

          <Filter handleData={this.handleParentData}/>
          <p>{this.state.myName}</p>      

        </div>
    )
  }
}

It's important to note that any object you create in JS (i.e. your state in each ponent) is already in JSON format so no need to try and convert it. Here is what the problem was:

In Filter.js, you were passing a single property from the state (this.state.myName) and in ResultList.js, function handleParentData() you were expecting to receive an event much like you were from the on change functions but you were really just passing a string. That's why nothing would happen. In Filter.js when you want to post back the form to the parent ponent, I would suggest passing back the entire state object (which is already a JSON object) instead of an individual property. Refer to my working example and you should be able to see what I mean.

P.S. I think I accidentally edited your original code example, if I did I'm terribly sorry I didn't mean to.

本文标签： javascriptReactpass form data from one component to anotherStack Overflow