React 表单提交

Question

我对反应还很陌生，还在学习使用它。 我有一个带有表单的组件，我想在提交期间获取数据并将其传输到另一个组件，我将在其中显示包含该数据的卡片。我用道具尝试了几种方法但失败了 如果有人能帮助我，我将不胜感激。 谢谢。

我有一个带有表单的组件，我想在提交期间获取数据并将其传输到另一个组件，我将在其中显示包含该数据的卡片。我用道具尝试了几种方法但都失败了

Answer 1

我在理解exactly你在找什么时遇到了一些麻烦，但我希望这会有所帮助

如果您试图传递数据以显示和重新呈现，但仅在提交时，您可以这样做：

---

Form.jsx：

import InputDisplay from './InputDisplay'

export default function Form(){
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const onSubmit = (event) => {
    event.preventDefault()
    let inputUsername = event.target.elements.username.value
    let inputPassword = event.target.elements.password.value
    setUsername(inputUsername)
    setPassword(inputPassword)
  }

  return (
    <form onSubmit={onSubmit}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <InputDisplay
        username={username}
        password={password}
      />
    </form>
  )
}

然后在 InputDisplay.jsx 中：

export default function InputDisplay({ username, password }){
  return (
    <div>
      <h1>Username: {username}</h1>
      <h1>Password: {password}</h1>
    </div>
  )
}

---

在这种情况下，用户名和密码应仅在提交时重新呈现和更新！