在react-final-form中,可以通过使用clearFields
函数来清除输入字段的值。
clearFields
函数是react-final-form提供的一个方法,用于清除指定字段的值。它接受一个字符串数组作为参数,数组中的每个字符串表示一个要清除值的字段。
以下是使用clearFields
函数清除输入字段值的示例代码:
import React from 'react';
import { Form, Field } from 'react-final-form';
const MyForm = () => {
const handleSubmit = (values) => {
// 处理表单提交
};
const handleClear = (form) => {
form.clearFields(['fieldName1', 'fieldName2']);
};
return (
<Form
onSubmit={handleSubmit}
render={({ handleSubmit, form }) => (
<form onSubmit={handleSubmit}>
<div>
<label>Field 1</label>
<Field name="fieldName1" component="input" type="text" />
</div>
<div>
<label>Field 2</label>
<Field name="fieldName2" component="input" type="text" />
</div>
<button type="submit">Submit</button>
<button type="button" onClick={() => handleClear(form)}>Clear</button>
</form>
)}
/>
);
};
export default MyForm;
在上面的示例中,我们定义了一个MyForm
组件,其中包含两个输入字段和两个按钮。当点击"Clear"按钮时,会调用handleClear
函数来清除fieldName1
和fieldName2
字段的值。
这是一个简单的示例,你可以根据自己的需求进行修改和扩展。关于react-final-form的更多信息和用法,请参考官方文档。
领取专属 10元无门槛券
手把手带您无忧上云