ホーム>source

小道具によってコンポーネントの状態から別のコンポーネントにデータを取得したい

小道具によってfxを別のコンポーネントに渡しました。このfxは別のコンポーネントからデータを取得し、それをそのコンポーネントの現在の状態に追加することです 最初のコンポーネント:

<前>ウィズウィズ

}

別のコンポーネントで私はfxを取り、それにデータを入れます

2番目のコンポーネント:

<前>ウィズウィズ

}

だから私の問題は、入力フィールドにデータを書き込んで送信ボタンをクリックすると、データが未定義であると通知されます。

const ListNames = () => { const [Nameslist, setNames] = useState([ { name: 'Abdelrahman', age: 25, id: 1 }, { name: 'Yasmine', age: 25, id: 2 }, { name: 'Outhman', age: 10, id: 3 }, { name: 'Yazid', age: 7, id: 4 }, ]); const addName = (name, age) => setNames( [...Nameslist, { name, age, id: Math.random() }] ) { return ( <div className="name-list"> <ul> {Nameslist.map(name => { return ( <li key={name.id}>{name.name} - {name.age}</li> ) })} </ul> <AddName addName={addName} /> </div> ); }
あなたの答え
  • 解決した方法 # 1

    <前>ウィズウィズ

    addName.js

    <前>ウィズウィズ

  • 解決した方法 # 2

    入力フィールドには const ListNames = () => { const [Nameslist, setNames] = useState([ { name: 'Abdelrahman', age: 25, id: 1 }, { name: 'Yasmine', age: 25, id: 2 }, { name: 'Outhman', age: 10, id: 3 }, { name: 'Yazid', age: 7, id: 4 }, ]); const addName = (details) => { setNames(prevList => [ ...prevList, { ...details, id: Math.random() } ]); }; return ( <div className="name-list"> <ul> {Nameslist.map(name => { return ( <li key={name.id}>{name.name} - {name.age}</li> ) })} </ul> <AddName addName={addName} /> </div> ); } が必要です  属性。 HTMLフォームのW3ドキュメントの例を次に示します。https://www.w3schools.com/html/tryit.asp?filename = tryhtml_form_submit

    エディターで名前を削除してみると、機能しないことがわかります。

    const addName = ({ addName }) => { const [ enteredName, setEnteredName ] = useState(""); const [ enteredAge, setEnteredAge ] = useState(""); const handleSubmit = (e) => { e.preventDefault(); addName({ name: enteredName, age: enteredAge }); } return ( <form onSubmit={handleSubmit}> <input type="text" required value={enteredName} onChange={(e) => setEnteredName(e.target.value)}></input> <input type="number" value={enteredAge} onChange={(e) => setEnteredAge(e.target.value)} ></input> <input type="submit"></input> </form> ); }

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ flutter - リスト内の単一の文字を複数の文字とループさせ、より大きなリストのダーツを返す方法は?