如何使用 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
处理程序更改为使用props
和not 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>
)
}
}
我是 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
处理程序更改为使用props
和not 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>
)
}
}