텍스트 비교

두 텍스트 파일의 차이점을 찾아보세요

실시간 편집

변경 없는 행 숨기기

줄바꿈 비활성화

레이아웃

비교 단위

구문 강조

Diffchecker Desktop 가장 안전하게 Diffchecker를 사용하는 방법. 데스크톱 앱을 사용하면 비교 데이터가 외부로 전송되지 않습니다!데스크톱 앱 받기

useFieldArray sandbox diff

생성일 4년 전비교 결과 만료 없음

2 삭제

행
총
삭제

글자
총
삭제

이 기능을 계속 사용하려면 업그레이드해 주세요 Diffchecker Pro 요금제 보기

144 행

1 추가

행
총
추가

글자
총
추가

이 기능을 계속 사용하려면 업그레이드해 주세요 Diffchecker Pro 요금제 보기

144 행

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 "./styles.css";

let renderCount = 0;

function App() {

const { register, control, handleSubmit, reset, watch } = useForm({

const { register, control, handleSubmit, reset } = useForm({

defaultValues: {

test: [{ firstName: "Bill", lastName: "Luo" }]

}

});

const {

fields,

append,

prepend,

remove,

swap,

move,

insert,

replace

} = useFieldArray({

control,

name: "test"

});

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

// if you want to control your fields with watch

// const watchResult = watch("test");

// console.log(watchResult);

// The following is useWatch example

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

renderCount++;

return (

<h1>Field Array </h1>

<p>The following demo allow you to delete, append, prepend items</p>

<span className="counter">Render Count: {renderCount}</span>

<ul>

{fields.map((item, index) => {

return (

<Controller

render={({ field }) => <input {...field} />}

name={`test.${index}.lastName`}

control={control}

<button type="button" onClick={() => remove(index)}>

Delete

</button>

</li>

);

})}

</ul>

<button

type="button"

onClick={() => {

append({ firstName: "appendBill", lastName: "appendLuo" });

}}

append

</button>

<button

type="button"

onClick={() =>

prepend({

firstName: "prependFirstName",

lastName: "prependLastName"

})

}

prepend

</button>

<button

type="button"

onClick={() =>

insert(parseInt(2, 10), {

firstName: "insertFirstName",

lastName: "insertLastName"

})

}

insert at

</button>

swap

</button>

move

</button>

<button

type="button"

onClick={() =>

replace([

{

firstName: "test1",

lastName: "test1"

{

firstName: "test2",

lastName: "test2"

}

])

}

replace

</button>

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

remove at

</button>

<button

type="button"

onClick={() =>

reset({

test: [{ firstName: "Bill", lastName: "Luo" }]

})

}

reset

</button>

</section>

</form>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

저장된 비교 결과

원본

파일 열기

import React from "react";
import { useForm, useFieldArray, Controller, useWatch } from "react-hook-form";
import ReactDOM from "react-dom";

import "./styles.css";

let renderCount = 0;

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

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

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

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

renderCount++;

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

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

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

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

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

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

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

수정본

파일 열기

import React from "react";
import { useForm, useFieldArray, Controller } from "react-hook-form";
import ReactDOM from "react-dom";

import "./styles.css";

let renderCount = 0;

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

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

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

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

renderCount++;

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

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

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

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