Comments (5)
You can also try this way
import * as React from "react";
import { useForm } from "react-hook-form";
import Headers from "./Header";
import "./styles.css";
let renderCount = 0;
export default function App() {
const { register, handleSubmit, setValue, watch } = useForm({
defaultValues: {
firstName: "",
lastName: "",
checkbox: [],
radio: "",
message: "",
},
});
const checkboxValue = watch("checkbox", [])
const handleCheckboxChange = React.useCallback((e) => {
const { checked, value } = e.target;
const newValue = checked ? [...checkboxValue, value] : checkboxValue.filter((v) => v !== value)
setValue("checkbox", newValue);
}, [setValue, checkboxValue]);
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Headers renderCount={renderCount} />
<input
{...register("checkbox")}
type="checkbox"
value="A"
onChange={handleCheckboxChange}
/>
<input
{...register("checkbox")}
type="checkbox"
value="B"
onChange={handleCheckboxChange}
/>
<input
{...register("checkbox")}
type="checkbox"
value="C"
onChange={handleCheckboxChange}
/>
<div style={{ border: "1px solid red", padding: 12 }}>
<h2>THIS IS A MODAL</h2>
<p>Duplicated checkboxes with the same values!</p>
<input
{...register("checkbox")}
type="checkbox"
value="A"
onChange={handleCheckboxChange}
/>
<input
{...register("checkbox")}
type="checkbox"
value="B"
onChange={handleCheckboxChange}
/>
<input
{...register("checkbox")}
type="checkbox"
value="C"
onChange={handleCheckboxChange}
/>
</div>
<input type="submit" />
</form>
);
}
from react-hook-form.
honestly not sure if we support your usage with multiple checkbox groups in different components.
from react-hook-form.
@bluebill1049 Oh.. that's bad. I need to have 2 forms that are in sync. Is there a correct way to handle it using RHF?
Thanks for your fast feedback.
Really appreciate it :)
from react-hook-form.
@damian-balas Do you mean if you update any value from form1 automatically those values should be appeared in modal form2?
If that is the case.
import { useEffect } from 'react';
import { useForm } from 'react-hook-form';
const useFormSync = (forms) => {
useEffect(() => {
const syncForms = (updatedForm, updatedValues) => {
forms.forEach((form) => {
if (form !== updatedForm) {
Object.keys(updatedValues).forEach((name) => {
form.setValue(name, updatedValues[name]);
});
}
});
};
const unsubscribe = forms.map((form) =>
form.watch((values) => syncForms(form, values))
);
return () => {
unsubscribe.forEach((unsub) => unsub());
};
}, [forms]);
};
// Usage
function YourComponent() {
const form1 = useForm();
const form2 = useForm();
useFormSync([form1, form2]);
return (
<>
{/* Form 1 */}
<form>
<input name="field1" ref={form1.register} />
<input name="field2" ref={form1.register} />
</form>
{/* Form 2 */}
<form>
<input name="field1" ref={form2.register} />
<input name="field2" ref={form2.register} />
</form>
</>
);
}
export default YourComponent;
from react-hook-form.
@erashu212 Thanks for your feedback!
I'll try it out soon and come back with some info :)
from react-hook-form.
Related Issues (20)
- issue: UseWatch not subscribing to array changes HOT 1
- issue: `isDirty` is always 'true' when the `reactStrictMode` property is enabled in the `next.config.js` config
- issue: setValue with shouldDirty on nested objected throws TypeError
- Validating array inputs based on another field from within the array
- Create reusable form section HOT 3
- issue: Form should not transition to 'isSubmitting' true unless validation has passed HOT 2
- issue: custom validate works onChange even though I set useForm({mode: 'onBlur'}).
- issue: FieldArray append with React Select not working correctly. HOT 1
- issue: Controlled Field Array Controller component does not render latest value with update(index, { ...item, lastName: "World", }); if using spread operator {...item, lastName: "World"} to update an object
- The new website has a security problem which stops me from seeing it HOT 1
- issue: Subscription to isValidating via useController causes quadratic amounts of re-renders on submit HOT 4
- issue: useFieldArray incorrectly treats value of 0 as empty value
- issue: Form-level `disabled` doesn't affect uncontrolled inputs that aren't rendered immediately HOT 1
- development of hookform/core for alternative frameworks HOT 2
- issue: Fields dirty state is not updated when passing values to useForm since 7.51.0 HOT 8
- Validate all Form Fields in Parallel on Submit when criteriaMode is set to 'all' HOT 2
- Submit the form outside the form (imperative submission) HOT 2
- issue: Async defaultValues function overwrites values in React.StrictMode
- issue: Default values set by resetting are discarded when register has not been called yet.
- issue: useFieldArray doesn't retain provided values when appending
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-hook-form.