固定在提交而不是on Change上

发布于 2025-02-03 13:33:11 字数 924 浏览 2 评论 0原文

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

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

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更新很好，但是对于某些输入字段，我不需要它在单击触发表单的实际提交按钮之前进行更新/重新渲染。

那么，当单击按钮时，如何更新InputField的状态，而不是每次在输入字段中编写新字符时更新的位置？

原文

I have a form, where I use the input from the input fields to send to a back-end.

For example, I have a variable looking something like this:

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

Then I have a form that looks something like this:

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

The fetchData is given by:

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

I have other forms as well, where this onChange updating is good, but for some input fields I don't need it do update/re-render before the actual submit button that triggers the form are clicked.

So how do I update the state of the inputField when the button is clicked, instead of now where it updates every time I write a new character in the input field ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

诗酒趁年少 2025-02-10 13:33:11

尝试一下

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>

  );
};

Try this

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>

  );
};

回复收藏 0 原文

愿与i 2025-02-10 13:33:11

您可以为此使用useref挂钩。

const inputNumber = useRef();

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

然后按按钮单击您可以得到这样的值

inputNumber.current?.value,

You can use useRef hook for that.

const inputNumber = useRef();

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

Then on button click you can get the value like that

inputNumber.current?.value,

回复收藏 0 原文

听闻余生 2025-02-10 13:33:11

您不需要这个状态，甚至不需要裁判。您可以直接从提交事件（event.target。您将需要将name属性添加到＆lt; input/＆gt;以使其可以从事件目标访问。请在下面找到示例：

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>

You don't need a state for that and you don't even need a ref. You can get the form values directly from the submit event (event.target.<input name>.value). You will need to add the name property to the <input /> to make it accessible from the event target. Please, find the example below:

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>

回复收藏 0 原文

~没有更多了~