react密码登录框的问题

Question

react的函数组件实现的一个用户名密码登录框。两个TextInput是用户名及密码，一个按钮就是提交按钮。
提交按钮

问题1.满足下面这个要求的代码，应该怎么写：
onSubmit通过props传递给组件，带两个参数：用户名，密码。

原英文：
The onSubmit handler is passed through props to the component and accepts two param
(in that order)：用户名，密码

When the Submit button is pressed, the onsubmit handler should be called.

问题2：满足下面要求的代码是不是下面这样？
用户输入用户名时用户名输入框应该更新它自己的value属性。
The username input should update its value attribute on being changed with the entered username.

export default function LoginForm() {
let [username, setUsername]=useState("")
<TextInput placeholder="Username" id="username-input"
value={username}
onChange={
({target})=>{
setUsername(target.value)
}
}
/>

Answer 1

1. 代码如下

import React, {useState} from 'react';

function TextInput(props) {
  return <input placeholder={props.placeholder} id={props.id} value={props.value}
                onChange={({target}) => props.onChange(target.value)}/>
}

function LoginForm({onSubmit}) {
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")
  return (<div>
    <TextInput
      placeholder="Username"
      id="username-input"
      value={username}
      onChange={setUsername}
    />
    <TextInput
      placeholder="Password"
      id="password-input"
      value={password}
      onChange={setPassword}
    />
    <button
      onClick={() => onSubmit(username, password)}
    >提交
    </button>
  </div>)
}

export default function Login() {
  return (<LoginForm onSubmit={(username, password) => alert(username + ':' + password)}/>);
}

1. 不是的,应该通过props传递参数