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获取一个文本字段值。但是无法获得两个文本字段的值。代码链接：https://stackblitz.com/edit/dhanapal-react-ex-1

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

Answer 1

好的，所以我对您的代码做了一些更改，您可以在此处查看：https://stackblitz.com/edit/dhanapal-react-ex-1-8pzeks?file=index.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中，当您要将表单发回到父组件时，建议将整个状态对象（已经是一个JSON对象）而不是单个属性传递回来。参考我的工作示例，您应该能够理解我的意思。

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

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

1 个答案: