英文:
How to access input reference from another file using Unform?
问题
我正在尝试使用以下结构的unform：
Component/inputRadio.ts：
export const TextInputInput: React.FC<TextInputInputProps> = ({ name, ...props }) => {
const inputRef = useRef<HTMLInputElement>(null);
const { fieldName, registerField } = useField(name!);
useEffect(() => {
registerField({
name: fieldName,
ref: inputRef.current,
path: 'value',
});
}, [fieldName, registerField]);
return(
<InputCss ref={inputRef} className={clsx(InputCss)} {...props} />
)
}
在另一个文件中，这是我的提交函数：
const Login: React.FC = () => {
const formRef = useRef<FormHandles>(null);
const handleSubmit = useCallback(
async (data: SignInFormData) => {
try {
console.log(data);
} catch (err) {
console.log(err);
}
},
[],
);
return(
<Form ref={formRef} onSubmit={handleSubmit}>
<TextInputInput
type='text'
id="text"
name='cpf'
placeholder='000.000.000-00'
/>
<FormatedTextInput
type="password"
id='password'
name='password'
placeholder='********'
/>
<Button type='submit'>Entrar</Button>
</Form>
)
}
export default Login;
我该如何在组件外部操作值？我已经在组件内部使用了useRef和这个“标准”的Unform结构。如何在另一个导入的文件中更改或获取值？
具体来说，我想在点击另一个按钮之前获取一个字段的值，这是在提交函数之前。
我不想使用document.getElementById()。
英文:
I'm trying to use unform with the following structure:
Component/inputRadio.ts:
export const TextInputInput: React.FC<TextInputInputProps> = ({ name, ...props }) => {
const inputRef = useRef<HTMLInputElement>(null);
const { fieldName, registerField } = useField(name!);
useEffect(() => {
registerField({
name: fieldName,
ref: inputRef.current,
path: 'value',
});
}, [fieldName, registerField]);
return(
<InputCss ref={inputRef} className={clsx(InputCss)} {...props} />
)
}
In another file this is my submit function:
const Login: React.FC = () => {
const formRef = useRef<FormHandles>(null);
const handleSubmit = useCallback(
async (data: SignInFormData) => {
try {
console.log(data);
} catch (err) {
console.log(err);
}
},
[],
);
return(
<Form ref={formRef} onSubmit={handleSubmit} >
<TextInputInput
type='text'
id="text"
name='cpf'
placeholder='000.000.000-00'
/>
<FormatedTextInput
type="password"
id='password'
name='password'
placeholder='********'
/>
<Button type='submit'>Entrar</Button>
</Form>
)
}
export default Login;
how can I manipulate the value outside the component? I'm already using useRef inside the component with this "standard" Unform structure. How do you change or get the value in another file import?
specifically I want to get one field value when click in another button, this before the submit function.
I dont want to use document.getElementById().
答案1
得分: 0
你可以使用formRef.current.getFieldValue。
例如，如果你想获取cpf的值，可以使用formRef.current.getFieldValue('cpf')。
如果你想访问所有的值，可以使用formRef.current.getData()。
这些也在unform指南中有详细说明。
英文:
You can use formRef.current.getFieldValue.
For example, if you want to get the value of cpf, you can use formRef.current.getFieldValue('cpf').
Use formRef.current.getData() if you want to access all values.
These are also documented in the unform guides.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论