Wie übergebe ich Formulareingabewerte von der untergeordneten Komponente an die übergeordnete Komponente in REACT? ⇐ HTML

[Anonymous]

Ich habe gerade mit React angefangen, insbesondere versuche ich, Formulare zu verwenden. Ich habe versucht, ein einfaches Projekt zu erstellen, bei dem ich eine Formularkomponente mit einigen Eingaben habe. Sobald ich auf die Schaltfläche „Senden“ klicke, sollte sie den Eingabewert an den Vater übergeben Komponente (App) und sie sollte sie in einer benutzerdefinierten Listenkomponente rendern, die ich geschrieben habe.
Das einzige Problem ist, dass, wenn ich versuche, auf den Ereigniswert zuzugreifen, dieser als undefiniert ausgegeben wird. Was mache ich falsch?
Das Folgende ist mein Code für Der Einfachheit halber versuche ich vorerst nur die erste Eingabe zu rendern

Code: Select all

import './App.css';

function Form({onChangeName}) {

return (


Hello





Submit


);
}

export default Form;

:

Code: Select all

import List from './List';
import './App.css';
import Form from './Form';
import { useState } from 'react';

function App() {

const [contact, setContact] = useState({
fName: "",
lName: "",
email: ""
})

function onChangeName(event){
const { name, value } = event.target;
console.log(value)
setContact({
fname: value,
lName: "",
email: ""
})
}

return (


[*]

);
}

export default App;

Code: Select all

import logo from './logo.svg';
import './App.css';

function List({fName,lName,email}) {
return(
[list]
{fName}
[*]{lName}
[*]{email}
[/list]
)

}

export default List;