ステートレス入力に対応するカスタムフォームの作成

導入
このような何かを見た?

この記事では、この問題を解決しようとしています.だから始めましょう!

問題
その入力の各々の管理された状態で大きい形を作るその退屈な仕事.10の分野で形を想像してください🤯

親要素に入力要素を含めることができ、それらの状態を1つの真理のもとで管理することができればどうなるでしょうか?それは素晴らしい権利でしょう.親コンポーネントをビルドできます!

解決策
反応コンポーネントを作成してForm と入力要素を子要素として渡します.リコールするには、コンポーネントの子はchildren 子プロセスの配列であるコンポーネントのプロップです.

我々ならばconsole.log 中の各子Form コンポーネントのように見えます

今、私たちはからの出力を望むForm コンポーネントのJavaScriptObject フィールド名とそれらのそれぞれの入力値に対応するキー値組の形で.
我々が変わることができるならばvalue プロップとハンドルonChange 要素のプロップは、我々の使命を達成する!
でも待ちます.どのようにマッピング中に知っているか、どのようなfieldnameですか?そしてどこでどのように変更するときに入力のデータを格納するには?
この問題を解決するために、私たちはkey (別の空想要素のデフォルトの小道具はその使用をチェックしますhere . ここでフィールド名を示すためにキーを使います.
また、2余分な小道具を渡すformData & setFormData ) インForm コンポーネント

import { useState } from "react";
import Form from "./Form";
import "./styles.css";

export default function App() {

  const [formData, setFormData] = useState(null)

  return (
    <div className="App">
      <Form setFormData={setFormData} formData={formData}>
        <input key='name' placeholder='Enter name' />
        <input key='email' placeholder='Enter email' />
        <input key='phoneNumber' placeholder='Enter phone' />
        <input key='address' placeholder='Enter address' />
      </Form>

      <button onClick={() => console.log(formData)}>Submit</button>
    </div>
  );
}

にForm コンポーネントをマッピングして新しい配列を作成しますchildren 配列を変更し、props フィールド.value 要素のformData 変数とonChange 関数は、child.key ) そして、formData 経由setFormData

export default function Form({ children, formData, setFormData }) {

  const handleInputChange = (key, text) => {
    let newFormData = { ...formData }
    newFormData[key] = text
    setFormData(newFormData)
  }

  const mappedChildren = children.map(child => {
    return {
      ...child,
      props: {
        ...child.props,
        onChange: e => handleInputChange(child.key, e.target.value),
        value: formData ? formData[child.key] : ''
      }
    }
  })

  return (
    <section>
      {mappedChildren}
    </section>
  )
}

コンポーネントが完了し、ログによって作業をチェックしますformData コンソールで


動く!