我正在使用 react-final-form
我有一个 Form
组件,如下所示:
export function Form = ({ children, onSubmit, initialValues, ...props }) => {
return (
<FinalForm
initialValues={initialValues}
onSubmit={onSubmit}
render={({ handleSubmit, submitting, pristine, valid }) => (
<form onSubmit={handleSubmit} className="space-y-6" {...props}>
{children}
</form>
)}
/>
)
}
export default Form;
我想像这样使用这个表单组件:
<Form>
({ valid, pristine, submitting } => (
<TextInput name="email" label="Email Address" type="email" />
<Button text="Login" disabled={!valid || pristine || submitting} />
)
</Form>
我如何将道具 valid
、pristine
和 submitting
传递给我的孩子,以便我可以将其用于例如禁用按钮?
答案 0 :(得分:0)
代替
{children}
试试这个,
{
React.Children.map(children, child => {
if (React.isValidElement(child)) {
return React.cloneElement(child, { submitting, pristine, valid });
}
return child;
});
}