テキスト比較

2 つのテキストファイルの違いを見つける

ライブエディター

未変更行を折りたたむ

折り返しなし

レイアウト

比較精度

シンタックスハイライト

Diffchecker Desktop Diffcheckerを実行する最も安全な方法。Diffchecker Desktopアプリを入手：あなたの差分はコンピューターから出ることはありません！Desktopを入手

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);