我正在尝试在 React
CurrencyInput
字段中渲染 customInput,到目前为止我所拥有的是:
import { TextField, TextFieldProps } from '@mui/material';
import React from 'react';
import CurrencyInput from 'react-currency-input-field';
import { Controller, RegisterOptions, useFormContext } from 'react-hook-form';
type IProps = {
name: string;
rules?: RegisterOptions;
defaultValue?: string;
};
type Props = IProps & TextFieldProps;
export default function RHFCurrencyField({ name, rules, defaultValue, ...other }: Props) {
const { control } = useFormContext();
return (
<Controller
name={name}
rules={rules}
control={control}
render={({ field, fieldState: { error } }) => (
<CurrencyInput
name={name}
groupSeparator=" "
defaultValue={defaultValue}
decimalsLimit={2}
onValueChange={(value, name) => {
field.onChange(value);
}}
customInput={() => <CurrencyTextField {...other} {...field} />}
/>
)}
/>
);
}
export const CurrencyTextField = React.forwardRef((props: Props, ref: any) => {
return <TextField {...props} ref={ref} />;
});
我收到警告,并输入 i
react-dom.development.js:67 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of CurrencyInput.
我错过了什么?
react-currency-input-field
没有 customInput
道具。
如果您需要通过自定义输入组件使用数字格式,则必须使用不同的包,例如
react-number-format
。这个包有您正在寻找的 customInput 属性。