Javascript 以react钩子形式更改输入
我正在使用React和library构建webapp。我想创建一个表单,其中一些字段的更改会触发一些事件。所以我需要通过customJavascript 以react钩子形式更改输入,javascript,reactjs,forms,react-hook-form,Javascript,Reactjs,Forms,React Hook Form,我正在使用React和library构建webapp。我想创建一个表单,其中一些字段的更改会触发一些事件。所以我需要通过customonChange 但是,由于v7.0,我不能使用onChange,因为register使用自己的onChange import React from 'react' import { useForm } from 'react-hook-form' const MyForm = () => { const form = useForm() cons
onChange
但是,由于v7.0,我不能使用onChange
,因为register
使用自己的onChange
import React from 'react'
import { useForm } from 'react-hook-form'
const MyForm = () => {
const form = useForm()
const onChangeFirst = value => console.log('First:', value)
const onChangeSecond = value => console.log('Second:', value)
return (
<form onSubmit={form.handleSubmit(vals => null)}>
<input {...register('first')} />
<input {...register('second')} />
</form>
)
}
从“React”导入React
从“react hook form”导入{useForm}
常量MyForm=()=>{
const form=useForm()
const onChangeFirst=value=>console.log('First:',value)
const onChangeSecond=value=>console.log('Second:',value)
返回(
空)}>
)
}
如何将
onChangeFirst
传递到first
输入和onChangeFirst
传递到second
输入?在输入更改时,有两种方法触发onChange
1/带组件(重新安装)
有两种方法可以在输入更改时触发更改 1/带组件(重新安装)
const onChangeFirst = value => console.log('First:', value)
<Controller
control={control}
name="first"
render={({field}) => (
<input {...field} onChange={e => {
onChangeFirst(field.value);
field.onChange(e);
}} />
)}
/>
const second = useWatch({
control,
name: 'second'
});
useEffect(() => {
console.log('Second:', second)
}, [second])