如何在反應中使用 react-hook-form 將表單數據發送到 state？

Question

我是 React 的新手。 我想要做的是有一個提交按鈕，用於將數據/狀態從另一個組件中的表單輸入字段記錄到控制台。 為了實現這一點，我有 ResultList 組件，它呈現具有表單的過濾器組件。 單擊提交按鈕時，輸入字段中的數據應登錄到控制台。 我使用 react-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，並將onSubmit處理程序更改為使用props而不是this.props 。 功能組件是無實例的，沒有this object。

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>
  );
}

或者，您可以直接在 function 簽名中解構道具

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>
  );
}

Answer 2

您需要將道具傳遞給過濾器：

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