Как отправить данные формы в состояние с помощью формы реакции-крючка в реакции?

Question

Я новичок в React. Что я хочу сделать, так это иметь кнопку отправки, чтобы регистрировать данные / состояние на консоли из полей ввода формы, которые находятся в другом компоненте. Чтобы реализовать это, у меня есть компонент ResultList, который отображает компонент фильтра, имеющий форму. При нажатии кнопки отправки данные из полей ввода должны записываться на консоль. Я использовал response-form-hook для реализации формы. Это ссылка на песочницу

Компонент ResultList выглядит так:

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: '',
          myEmail: ''
      };
    }

    handleParentData = (formModel) => {
      console.log(formModel);

      this.setState({...formModel},()=>alert(JSON.stringify(this.state)));
    }

  render() {
    return (
        <div>

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

, а компонент Фильтр выглядит так:

import React, { Component } from 'react';
import {useForm} from 'react-hook-form';

export default function Filter() {

  const {register,handleSubmit} = useForm();

  const onSubmit = (data) => {
    // console.log(data);
    this.props.handleData(data);
  } 

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        Name: <input type="text" name="myName" ref={register}/>
        <br />
        Email: <input type="text" name="myEmail" ref={register}/>
        <br /><br />
        <input type="submit" value="Submit"/>
      </form>
    </div>
  )

}

Answer 1

Вам необходимо передать props в фильтр:

export default function Filter(props) {

и удалить .this.props:

props.handleData(data);

Полный код:

import React, { Component } from 'react';
import {useForm} from 'react-hook-form';

export default function Filter(props) {

  const {register,handleSubmit} = useForm();

  const onSubmit = (data) => {
    // console.log(data);
    props.handleData(data);
  } 

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        Name: <input type="text" name="myName" ref={register}/>
        <br />
        Email: <input type="text" name="myEmail" ref={register}/>
        <br /><br />
        <input type="submit" value="Submit"/>
      </form>
    </div>
  )

}

Также необходимо сменить {this.state.email} на {this.state.myEmail}

Полный код:

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: '',
          myEmail: ''
      };
    }

    handleParentData = (formModel) => {
      console.log(formModel);

      this.setState({...formModel},()=>alert(JSON.stringify(this.state)));
    }


  render() {
    return (
        <div>

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

        </div>
    )
  }
}

Answer 2

Необходимо принять реквизиты в функциональном компоненте и изменить обработчик onSubmit для использования props и , а не this.props. Функциональные компоненты не имеют экземпляров и не имеют объекта this.

export default function Filter(props) {

  const { register, handleSubmit } = useForm();

  const onSubmit = data => {
    props.handleData(data);
  } ;

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        Name: <input type="text" name="myName" ref={register}/>
        <br />
        Email: <input type="text" name="myEmail" ref={register}/>
        <br /><br />
        <input type="submit" value="Submit"/>
      </form>
    </div>
  );
}

В качестве альтернативы вы можете деструктурировать props прямо в сигнатуре функции

export default function Filter({ handleData }) {

  const { register, handleSubmit } = useForm();

  const onSubmit = data => handleData(data);

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        Name: <input type="text" name="myName" ref={register}/>
        <br />
        Email: <input type="text" name="myEmail" ref={register}/>
        <br /><br />
        <input type="submit" value="Submit"/>
      </form>
    </div>
  );
}