Comparar texto

Encuentra la diferencia entre dos archivos de texto

Editor live
Ocultar sin cambios
Sin ajuste de línea
Vista
Nivel de detalle
Resaltado de sintaxis

useFieldArray sandbox diff

Creado El diff nunca expira
2 eliminaciones
144 líneas
1 adición
144 líneas
import React from "react";
import React from "react";
import { useForm, useFieldArray, Controller, useWatch } from "react-hook-form";
import { useForm, useFieldArray, Controller } from "react-hook-form";
import ReactDOM from "react-dom";
import ReactDOM from "react-dom";


import "./styles.css";
import "./styles.css";


let renderCount = 0;
let renderCount = 0;


function App() {
function App() {
const { register, control, handleSubmit, reset, watch } = useForm({
const { register, control, handleSubmit, reset } = useForm({
defaultValues: {
defaultValues: {
test: [{ firstName: "Bill", lastName: "Luo" }]
test: [{ firstName: "Bill", lastName: "Luo" }]
}
}
});
});
const {
const {
fields,
fields,
append,
append,
prepend,
prepend,
remove,
remove,
swap,
swap,
move,
move,
insert,
insert,
replace
replace
} = useFieldArray({
} = useFieldArray({
control,
control,
name: "test"
name: "test"
});
});


const onSubmit = (data) => console.log("data", data);
const onSubmit = (data) => console.log("data", data);


// if you want to control your fields with watch
// if you want to control your fields with watch
// const watchResult = watch("test");
// const watchResult = watch("test");
// console.log(watchResult);
// console.log(watchResult);


// The following is useWatch example
// The following is useWatch example
// console.log(useWatch({ name: "test", control }));
// console.log(useWatch({ name: "test", control }));


renderCount++;
renderCount++;


return (
return (
<form onSubmit={handleSubmit(onSubmit)}>
<form onSubmit={handleSubmit(onSubmit)}>
<h1>Field Array </h1>
<h1>Field Array </h1>
<p>The following demo allow you to delete, append, prepend items</p>
<p>The following demo allow you to delete, append, prepend items</p>
<span className="counter">Render Count: {renderCount}</span>
<span className="counter">Render Count: {renderCount}</span>
<ul>
<ul>
{fields.map((item, index) => {
{fields.map((item, index) => {
return (
return (
<li key={item.id}>
<li key={item?.id}>
<input {...register(`test.${index}.firstName`)} />
<input {...register(`test.${index}.firstName`)} />


<Controller
<Controller
render={({ field }) => <input {...field} />}
render={({ field }) => <input {...field} />}
name={`test.${index}.lastName`}
name={`test.${index}.lastName`}
control={control}
control={control}
/>
/>
<button type="button" onClick={() => remove(index)}>
<button type="button" onClick={() => remove(index)}>
Delete
Delete
</button>
</button>
</li>
</li>
);
);
})}
})}
</ul>
</ul>
<section>
<section>
<button
<button
type="button"
type="button"
onClick={() => {
onClick={() => {
append({ firstName: "appendBill", lastName: "appendLuo" });
append({ firstName: "appendBill", lastName: "appendLuo" });
}}
}}
>
>
append
append
</button>
</button>
<button
<button
type="button"
type="button"
onClick={() =>
onClick={() =>
prepend({
prepend({
firstName: "prependFirstName",
firstName: "prependFirstName",
lastName: "prependLastName"
lastName: "prependLastName"
})
})
}
}
>
>
prepend
prepend
</button>
</button>
<button
<button
type="button"
type="button"
onClick={() =>
onClick={() =>
insert(parseInt(2, 10), {
insert(parseInt(2, 10), {
firstName: "insertFirstName",
firstName: "insertFirstName",
lastName: "insertLastName"
lastName: "insertLastName"
})
})
}
}
>
>
insert at
insert at
</button>
</button>


<button type="button" onClick={() => swap(1, 2)}>
<button type="button" onClick={() => swap(1, 2)}>
swap
swap
</button>
</button>


<button type="button" onClick={() => move(1, 2)}>
<button type="button" onClick={() => move(1, 2)}>
move
move
</button>
</button>


<button
<button
type="button"
type="button"
onClick={() =>
onClick={() =>
replace([
replace([
{
{
firstName: "test1",
firstName: "test1",
lastName: "test1"
lastName: "test1"
},
},
{
{
firstName: "test2",
firstName: "test2",
lastName: "test2"
lastName: "test2"
}
}
])
])
}
}
>
>
replace
replace
</button>
</button>


<button type="button" onClick={() => remove(1)}>
<button type="button" onClick={() => remove(1)}>
remove at
remove at
</button>
</button>


<button
<button
type="button"
type="button"
onClick={() =>
onClick={() =>
reset({
reset({
test: [{ firstName: "Bill", lastName: "Luo" }]
test: [{ firstName: "Bill", lastName: "Luo" }]
})
})
}
}
>
>
reset
reset
</button>
</button>
</section>
</section>


<input type="submit" />
<input type="submit" />
</form>
</form>
);
);
}
}


const rootElement = document.getElementById("root");
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
ReactDOM.render(<App />, rootElement);


Diferencias guardadas