单击提交按钮后，反应表单未在屏幕上显示正确的输入答案

【问题标题】：React form not displaying the correct inputs on the screen after I click submit button单击提交按钮后，反应表单未在屏幕上显示正确的输入
【发布时间】：2020-11-01 02:29:41
【问题描述】：

这是一个 React 表单。我一直在尝试显示 Hello {firstName} {lastName} 用户 提供输入并单击提交按钮 。但是，它没有正确记录输入，并且在单击提交按钮后没有正确显示。请帮忙！！！

import React, { useState } from 'react';

function App() {
  const [newName, setNewName] = useState({
    fName: '',
    lName: ''
  });
  const [fullName, setFullName] = useState(newName);

  function handleOnSubmit(event) {
    console.log(newName);
    setFullName(newName);
    event.preventDefault();
  }

  function handleOnChange(event) {
    console.log(newName);
    var { value, name } = event.target;
    setNewName((prevValue) => {
      if (name === 'fName')
        return {
          fName: value,
          lName: prevValue.lName
        };
      else
        return {
          fName: prevValue.fName,
          lName: value
        };
    });
  }

  return (
    <div className='container'>
      <h1>
        Hello {fullName.fName} {fullName.lName}
      </h1>
      <form onSubmit={handleOnSubmit}>
        <input
          name='fName'
          placeholder='First Name'
          onChange={handleOnChange}
          value={fullName.fName}
        />
        <input
          name='lName'
          placeholder='Last Name'
          onChange={handleOnChange}
          value={fullName.lName}
        />
        <button type='submit'>Submit</button>
      </form>
    </div>
  );
}

export default App;

【问题讨论】：

标签： javascript html css reactjs react-forms

【解决方案1】：

问题在于输入框的事件处理。在 value 中，您绑定了 fullName.fName 和 fullName.lName ，但是 onChange 您正在更新 newName 的状态，而 fullName 的状态仅在您单击 submit 时才会更改。请更新表格代码如下。它应该适合你！

<form onSubmit={handleOnSubmit}>
        <input
          name="fName"
          placeholder="First Name"
          onChange={handleOnChange}
          value={newName.fName}
        />
        <input
          name="lName"
          placeholder="Last Name"
          onChange={handleOnChange}
          value={newName.lName}
        />
        <button type="submit">Submit</button>
      </form>

【讨论】：

【解决方案2】：

尝试使用这个：我们将创建一个Input 自定义钩子。

useInput.js file

//input custom hook

import { useState } from "react";
function useInput(initialValue = "") {
  const [value, setValue] = useState(initialValue);
  const reset = () => {
    setValue(initialValue);
  };
  const bind = {
    value,
    onChange: (e) => setValue(e.target.value),
  };
  return [value, bind, reset];
}
export default useInput;

这就是你如何使用这个Input自定义钩子：

import React from "react";
import useInput from "../hooks/useInput";
function Test() {
  const [firstName, bindFirstName, resetFirstName] = useInput("");
  const [lastName, bindLastName, resetLastName] = useInput("");
  const handleSubmit = (e) => {
     e.preventDefault();
     alert(`hello ${firstName} ${lastName}`); // you can change this as per your requirement
     resetFirstName();
     resetLastName();
  };
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="text" {...bindFirstName} />
        <input type="text" {...bindLastName} />
        <button value="submit" type="submit">
          Submit
        </button>
      </form>
    </div>
  );
}
export default Test;

【讨论】：