Реагировать |передать данные формы из одного компонента в другой - PullRequest
Новая
       7

Реагировать |передать данные формы из одного компонента в другой

0 голосов
/ 11 февраля 2019

Я занимаюсь разработкой небольшого приложения 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'));

Мне нужны значения текстового поля Filter.js в Result.js.Я могу получить одно значение текстового поля в Result.js.Но не удалось получить значения обоих текстовых полей.Ссылка на код: https://stackblitz.com/edit/dhanapal-react-ex-1

Как получить оба значения текстового поля в Result.js?

1 Ответ

0 голосов
/ 11 февраля 2019

хорошо, поэтому я внес в ваш код некоторые изменения, которые вы можете просмотреть здесь: https://stackblitz.com/edit/dhanapal-react-ex-1-8pzeks?file=index.js

В случае, если вышеуказанная ссылка больше не работает, я изменил следующее: 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, когда вы хотите отправить обратно форму в родительский компонент, я бы предложил передать обратно весь объект состояния (который уже является объектом JSON) вместо отдельного свойства.Обратитесь к моему рабочему примеру, и вы сможете понять, что я имею в виду.

PS Я думаю, что я случайно отредактировал ваш оригинальный пример кода, если я это сделаю, мне очень жаль, что я не хотел.

...