reactjs - 将 react-hook-form Controller 链接到状态值

Question

我正在尝试将 react-hook-form Controller 链接到状态值，但它没有呈现该值。

import { Controller, useForm } from "react-hook-form";

...

// here is my fields values
const [ addBill, setAddBill ] = useState({
    debitAmt: '',
    invoiceNumber: '',
    memo: '',
    invoiceDate: moment().format('YYYY-MM-DD'),
});

// here is how I'm rendering the Controller Input
<FormGroup className="mr-10 mb-10">
    <Label for="debitAmt" className="mr-sm-10">Debit Amt</Label>
    <Controller
        render={ ({value}) => {
            return (
            <NumberFormat
                value={value}
                thousandSeparator={true}
                prefix={"$"}
                onValueChange={(v) => {
                    setAddBill({...addBill, debitAmt: v.floatValue === undefined ? '' : v.floatValue})
                }}
            /> );
        }}
        name="debitAmt"
        id="debitAmt"
        variant="outlined"
        defaultValue={addBill.debitAmt}
        value={addBill.debitAmt}
        getInputRef={register({ required: true })} aria-invalid={errors.debitAmt ? "true" : "false"}
        control={control}
        className="form-control"
        style={setErrorStyle(errors.debitAmt)}
    />
    {errors.debitAmt && (
        <span style={{ color: "red" }} role="alert">required</span>
    )}
</FormGroup>

然后，当我打电话时：

setAddBill({
   ...addBill, 
   debitAmt: 10
});

它不会更新 NumberFormat 的值。如何将控制器连接到状态变量？

Answer 1

正如您在Controller 文档中看到的那样，Controller 的渲染方法procue value 和 onChange 属性。你应该这样使用：

<Controller
    render={ ({value, onChange}) => {
        return (
        <NumberFormat
            value={value}
            thousandSeparator={true}
            prefix={"$"}
            onValueChange={(v) => {
                setAddBill({...addBill, debitAmt: v.floatValue === undefined ? '' : v.floatValue});
                onChange(v);
            }}
        /> );
    }}
    name="debitAmt"
    id="debitAmt"
    variant="outlined"
    defaultValue={addBill.debitAmt}
    value={addBill.debitAmt}
    getInputRef={register({ required: true })} aria-invalid={errors.debitAmt ? "true" : "false"}
    control={control}
    className="form-control"
    style={setErrorStyle(errors.debitAmt)}
/>

在 React-hook-form 中，默认情况下，您不需要控制输入状态。如果您让 RHF 保存它，您可以使用Watch API或通过使用handleSubmit 提交表单来检索状态。