如何使用 react-hook-form 在 react 中将表单数据发送到一个状态?

How to send the form data up a state using react-hook-form in react?

我是 React 新手。我想要做的是有一个提交按钮,用于从另一个组件中的表单输入字段将 data/state 登录到控制台。为了实现这一点,我有一个 ResultList 组件,它呈现具有表单的 Filter 组件。单击提交按钮时,输入字段中的数据应登录到控制台。我使用 react-form-hook 来实现表单。 这是 link to the sandbox

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

}

需要在功能组件中接受道具,并将onSubmit处理程序更改为使用propsnot 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>
  );
}

您需要将 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>
    )
  }
}