反应 |将表单数据从一个组件传递到另一个组件

Question

我正在开发一个小型 React 应用程序，我有类似

的文件

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

Filter.js - 包含 2 个文本框和按钮

Result.js - 它包含 Filter.js 和一个 P 标签。

Index.js - 包含 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'));

我想要 Result.js 中的 Filter.js 文本框值。我可以将一个文本字段值设为 Result.js。但无法获取两个文本字段的值。代码 link：https://stackblitz.com/edit/dhanapal-react-ex-1

如何获取 Result.js 中的两个文本字段值？

Answer 1

好的，所以我对您的代码做了一些更改，您可以在此处查看：https://stackblitz.com/edit/dhanapal-react-ex-1-8pzeks?file=index.js

如果上面的link不再有效，这里是我改变的： 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>
    )
  }
}

并在 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>
    )
  }
}

重要的是要注意，您在 JS 中创建的任何对象（即您在每个组件中的状态）已经是 JSON 格式，因此无需尝试转换它。这是问题所在：

在 Filter.js 中，您从状态 (this.state.myName) 传递了一个属性，而在 ResultList.js 中，函数 handleParentData() 您期望接收一个事件，就像你从 on change 函数接收事件一样，但你实际上只是传递一个字符串。这就是为什么什么都不会发生的原因。在 Filter.js 中，当您想 post 将表单返回给父组件时，我建议传回整个状态对象（它已经是一个 JSON 对象）而不是单个属性。参考我的工作示例，您应该能够明白我的意思。

P.S。我想我不小心编辑了您的原始代码示例，如果我这样做了，我非常抱歉我不是故意的。

反应 |将表单数据从一个组件传递到另一个组件

React | pass form data from one component to another

javascript

forms

reactjs

redux

react-props