setState 提交而不是 onChange

Question

我有一个表单，我在其中使用来自输入字段的输入发送到后端。

例如，我有一个看起来像这样的变量：

const [data, setData] = useState([])
const [inputField, setInputField] = useState()

然后我有一个 form 看起来像这样：

<form onSubmit={fetchData}>
    <input type="number" value={value} onChange={(e) => setInputField(e.target.value)} />
    <button type="submit">Fetch data</button>
</form>

fetchData 由：

给出

function fetchData(e?: any) {
    e?.preventDefault();
    POST("/api", {
      inputField: inputField,
    }).then(async (response) => {
      const json = await response.json();
      setData({
        retrievedData: json.retrievedData,
      });
    });
  }

我还有其他表单，其中 onChange 更新很好，但对于某些输入字段我不需要它 update/re-render 在触发表单的实际提交按钮之前点击了。

那么如何在单击按钮时更新 inputField 的状态，而不是现在每次我在输入字段中写入新字符时它都会更新？

Answer 1

试试这个

import {useRef } from "react";

export const Temp = () => {
  const inputField = useRef(null);

  const onBtnClick = () => {
    alert(inputField?.current?.value);
  };
  return (
    <div>

        <input type="text" ref={inputField} />
        <button type="submit" onClick={onBtnClick}>
          Fetch data
        </button>
      </div>

  );
};

Answer 2

您可以为此使用 useRef 挂钩。

const inputNumber = useRef();

<input
   ref={inputNumber}
   id="number"
   placeholder="33xx"
   type="number"
 />

然后点击按钮你可以得到这样的值

inputNumber.current?.value,

Answer 3

你不需要一个状态，你甚至不需要一个参考。您可以直接从提交事件中获取表单值 (event.target.<input name>.value)。您需要将 name 属性添加到 <input /> 以使其可从事件目标访问。请找到以下示例：

function Form() {
  const [data, setData] = React.useState();

  const onSubmit = (e) => {
    e.preventDefault();
    const inputField = e.target.inputField.value;
    POST("/api", {
      inputField: inputField,
    }).then(async (response) => {
      const json = await response.json();
      setData({
        retrievedData: json.retrievedData,
      });
    });
  };

  return (
    <form onSubmit={onSubmit}>
      <input type="text" name="inputField" />
      <button type="submit">Submit</button>
    </form>
  );
}

ReactDOM.render(
  <Form />,
  document.getElementById("root")
);

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

setState 提交而不是 onChange

setState on submit and not onChange

reactjs

use-state