是否可以通过状态更新 react-hook-form defaultValue？

Question

我想根据下拉菜单中的选择自动填充文本字段，我认为状态更改会导致表单重新呈现，从而产生所需的效果，但事实并非如此。

这是演示我的问题的最小工作示例。

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

function FormTest (){
    const [dropdownValue, setDropdownValue] = React.useState('Option 1');

    const { register, handleSubmit } = useForm({
        defaultValues: {
            textfield: dropdownValue,
        },
        mode: 'onChange'
    },);

    const onSubmit = (form) => {
        alert(JSON.stringify(form))
    }

    return(
        <div>
            <form onSubmit={handleSubmit(onSubmit)}>
                <select name='dropdown'
                    ref={register}
                    value={dropdownValue}
                    onChange={(e) => setDropdownValue(e.currentTarget.value)}>
                        <option value="Option 1">Option 1</option>
                        <option value="Option 2">Option 2</option>
                </select>
                <input type='text'
                    name="textfield"
                    ref={register}
                />
                <input type='submit'/>
            </form>
        </div>

    );
}

export default FormTest;

当我将下拉菜单从选项 1 更改为选项 2 时，dropdownValue 更改为选项 2，但文本字段中的文本仍为选项 1。有没有办法进行此更新？也许是强制重新渲染文本字段？或者这不可能？

谢谢

Answer 1

你可以使用“react-hook-form”中的setValue：

const { register, handleSubmit, setValue } = useForm({ // setValue
  // ...
})

setValue 将接受 name 和新的 value：

onChange={(e) => {
  setDropdownValue(e.currentTarget.value)
  setValue('textfield', e.currentTarget.value)
}}