React は、入力コンテンツを介してリストケースに結合するための Hook の基本的な使用法に精通しています。

Reactプロジェクトを作成し、src配下にcomponentsフォルダーを作成し、
以下に
index.jsxindex.jsxを作成します参考コードは以下の通りです

import React, {
    
     useState } from "react";

const useInputValue = (initialValue) => {
    
    
    const [value,setValue] = useState(initialValue);
    return {
    
    
        value,
        onChange: e => setValue(e.target.value),
        clearValue: () => setValue("")
    }
}

const TodoForm = ({
    
     onSubnit }) => {
    
    
    const {
    
     clearValue,...text } = useInputValue("");
    function onSubeitHandler(e){
    
    
        e.preventDefault();
        onSubnit(text.value);
        clearValue("");
    }
    return (
        <form onSubmit = {
    
     onSubeitHandler }>
            <input type="text" {
    
     ...text }/>
        </form>
    )
}

export default TodoForm

まず、一般的な方法でレスポンシブデータをバインドするためのフォーム要素を宣言する関数 useInputValue を定義し、
レスポンシブデータのデフォルト値のパラメータを受け取り、その値を公開します。同時に、onChange
onChange というイベントをバインドします。フォーム要素の内容が変更されるときについてはよく知っておく必要があります。
ここでの意味は、入力ボックスまたは他のフォーム要素の内容が変更されたことを示すために onChange がトリガーされたときに、setValue(e.target.value) を実行するということです。レスポンシブ
データを変更する関数は、フォームの変更内容を setValue を介してレスポンシブデータの内容に書き込むことです。この
書き込み方法は比較的形式的です。GitHub では多くの場合にこの方法が使用され
、その後、手動でクリアするために、clearValue を作成しました。このデータ

それから実行を開始しました

const {
    
     clearValue,...text } = useInputValue("");

ClearValue を取り出して個別に使用し、メソッド全体によって返されたオブジェクトをこのテキストに置きたいことに注意してください。
値と onChange イベントのロジックは一緒でなければならず、そうしないと問題が発生します。

次に、onSubmit イベントをフォームにバインドして、その送信をリッスンします。これは、Enter キーを押してフォームのコンテンツを送信するだけであり、
バインドされたイベントロジックでは、
まず onSubeitHandler がイベントに入り、最初にそれを実行します。

e.preventDefault();

ブロック要素のデフォルトの動作は、フォームの送信がジャンプするためです。その動作をインターセプトする必要があります。そうでない場合は、これを追加せずに自分でジャンプすることができ、その後実行されます
。

onSubnit(text.value);

まずパラメータですが useInputValue宣言でテキストを取得し、その値がレスポンシブデータの値
OnSubnitを呼び出します
このonSubnitは親コンポーネントから与えられます
ここに画像の説明を挿入
よくわかっていないかもしれません, または、

関数モードで実際に記述してそれを受け入れることもできます。props の最初のパラメータは props です。便宜上、{ onSubnit } は、
props で onSubnit を受け取り
、応答データをクリアするために作成したばかりの clearValue を呼び出すことを直接意味します。

次に、次のように src の下に App.js コードを記述します。

import React,{
    
     useState } from "react"
import Index from "./components/index.jsx"

const Appind = () => {
    
    
  
  const [todos,setTodos] = useState([]);

  function setValue(text) {
    
    
    setTodos([{
    
     text },...todos]);
  }

  return (
    <div>
      <Index onSubnit={
    
     setValue }/>
      <div>
          {
    
    
            todos.map((element,index) => {
    
    
              return (
                <div key={
    
    index}>
                  {
    
     element.text } 
                </div>
              )
            })
          }
      </div>
    </div>
  );
};

export default Appind;

ここでは、最初に作成したばかりのインデックスコンポーネントをインポートし、次に呼び出して
todos 応答データを宣言します。デフォルト値は空の配列で
、次に setTodos を宣言して todos 応答データを変更します。

次に、index.jsx コンポーネントには親コンポーネントからの onSubnit 関数が必要であると前に述べましたが、
ここでは、
setValue にテキスト (つまり、index コンポーネントによって渡された text.value) を受け取り、
それを既存のコンポーネントと組み合わせるロジックを与えます。 ES6 配列を介してメソッドを使用します。添え字をマージして
から、setTodos を使用して値を変更します。

次に、インデックスコンポーネントの下にループを記述して、todos 配列のコンテンツを出力します。
プロジェクトを実行します
ここに画像の説明を挿入
。入力ボックスにコンテンツを入力し、Enter キーを押します。コンテンツは、onSubnit を通じて 1 つずつ todos とマージされ、ループ要素に続きます。これは

論理的です。このロジックを十分に実証することはできます。理解すれば、より多くのことを得ることができます。

React は、入力コンテンツを介してリスト ケースに結合するための Hook の基本的な使用法に精通しています。

おすすめ

React は、入力コンテンツを介してリストケースに結合するための Hook の基本的な使用法に精通しています。