reactjs - 如何使表单提交将数据保存在 useState Hook 变量中？

Question

我是 React 和 JavaScript 的新手；目前正在看钩子(Hook)。我在使用 Create React App 生成的应用程序中有这两个 React 功能组件:
App.js

import React, { useState} from 'react';
import NameTaker from './components/NameTaker'

export default function App() {
  const [name, setName] = useState(null);

  if (name == null) {
    return <NameTaker onSubmit={submitHandler} />
  }
  return <p>Your name is: {name}</p>

  function submitHandler(e) {
    setName(e.value)
  }
}

和 NameTaker.js

import React from 'react';

export default function NameTaker(props) {
  return(
    <div>
      <p>Please enter your name.</p>
      <form onSubmit={props.onSubmit}>
        <label>
          Name:
          <input type='text' name='name' />
        </label>
        <button type='submit'>Submit</button>
      </form>
    </div>
  )
}

这是 index.js 中的渲染语句:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

应用程序在本地运行正常， NameTaker.js 中的所有元素在网页上正确显示。

当我填写名称并单击按钮时，我希望它执行回调函数，将名称字符串存储在 name 中变量，那么当 App函数组件重新渲染，新名称应该被存储和 <p>Your name is: {name}</p>当条件语句被命中时，应该返回而不是表单。但是，当我单击按钮时，URL 只是更改为添加 /?name=whatever最后，表格保留在页面上。

我尝试修改程序，以便它为按钮提供回调，而不是像这样的形式: <button onClick={props.onSubmit}>Submit</button>但行为没有变化。

我尝试添加 e.preventDefault(); setName 之前和之后调用我的回调函数，但这也不起作用。

我正在寻找的确切行为是:当名称为 null 时，返回显示表单/输入框的组件，使用回调将提交的名称保存在父组件的状态中，重新渲染父组件，但是因为状态不再是 null返回显示名称的段落而不是表单组件。

谁能告诉我该怎么做？

Answer 1

你只需要修改你的submitHandler功能如下:

  function submitHandler(e) {
    e.preventDefault();
    setName(e.currentTarget.name.value)
  }

您需要 e.preventDefault()阻止页面重新渲染，虽然它通常不像以前那样需要，但我不完全确定为什么。

为了从表单中获取值，您必须指定您想要的值。 e.currentTarget.name.value给你当前的目标(即表格)，然后是 .name部分为您提供名称或 ID 为 name 的表单输入，然后您可以获得该输入的值。

const {useState} = React;
function NameTaker(props) {
  return(
    <div>
      <p>Please enter your name.</p>
      <form onSubmit={props.onSubmit}>
        <label>
          Name:
          <input type='text' name='name' />
        </label>
        <button type='submit'>Submit</button>
      </form>
    </div>
  )
}

function App() {
  const [name, setName] = useState(null);
  function submitHandler(e) {
    e.preventDefault();
    setName(e.currentTarget.name.value)
  }
  if (name == null) {
    return <NameTaker onSubmit={submitHandler} />
  }
  return <p>Your name is: {name}</p>


}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

<div id="root"/>