如何从反应js中的输入字段获取当前值

Question

我正在尝试从输入字段中获取当前值，但是在 onclick 之后，我在 colsole 中获得了宝贵的价值。 这是我的代码

    import { React, useState } from "react";

const CompoundIntrest = () => {
  const [capitalValue, setcapitalValue] = useState(1000);
  const ChangeCapital = () => {
    setcapitalValue(capitalValue - 100);
  };
  const Calculate = () => {
    console.log(capitalValue);
  };

  return (
    <>
      <button
        onClick={() => {
          ChangeCapital();
          Calculate();
        }}
      >
        click
      </button>
      <input type="number" value={capitalValue} />
    </>
  );
};

export default CompoundIntrest;

Answer 1

状态更新是异步发生的，因此您不会在事件处理程序中拥有更新的状态值。

您可以将新值（即capitalValue - 100 ）提升到可以传递给ChangeCapital和Calculate的范围。

 const CompoundIntrest = () => { const [capitalValue, setCapitalValue] = React.useState(1000); const handleClick = () => { const newCapitalValue = capitalValue - 100; ChangeCapital(newCapitalValue); Calculate(newCapitalValue); }; const ChangeCapital = (capitalValue) => { setCapitalValue(capitalValue); }; const Calculate = (capitalValue) => { console.log(capitalValue); }; return ( <React.Fragment> <button onClick={handleClick}>click</button> <input type="number" value={capitalValue} onChange={(e) => setCapitalValue(e.target.value)} /> </React.Fragment> ); }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<CompoundIntrest />);

 <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div id="root"></div>

注意：状态更新函数是同步调用的，但状态更新是异步发生的。

如果您通过传递状态更新程序回调来更新状态，这会变得更加清楚，您会看到回调是同步触发的。 请注意以下示例中的日志顺序：

 function App() { const [count, setCount] = React.useState(0); const handleClick = () => { console.log("Before calling setCount"); setCount((currCount) => { console.log("Inside setCount"); return currCount + 1; }); console.log("After calling setCount"); }; return <button onClick={handleClick}>Count: {count}</button>; } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);

 <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div id="root"></div>

Answer 2

我认为，您应该在输入标签中添加 onChange 方法，如下所示：

然后在按钮标签的 onClick 事件中获取当前值。

import { React, useState } from "react";

const CompoundIntrest = () => {
  const [capitalValue, setcapitalValue] = useState(1000);
  const ChangeCapital = () => {
    setcapitalValue(capitalValue - 100);
  };
  

  useEffect(() => {
    const Calculate = () => {
      console.log(capitalValue);
    };
    Calculate()
  }, [capitalValue])
  

  return (
    <>
      <button
        onClick={() => {
          ChangeCapital();
        }}
      >
        click
      </button>
      <input type="number" value={capitalValue} onChange={(e) => setcapitalValue(e.target.value)} />
    </>
  );
};

export default CompoundIntrest;

Answer 3

您可以像这样使用 useEffect ：-

import React,{useState,useEffect} from "react";

const CompoundIntrest  = () => {
  const [capitalValue, setcapitalValue] = useState(1000);
  const ChangeCapital = () => {
    setcapitalValue(capitalValue - 100);
  };
  const Calculate = () => {
    console.log(capitalValue);
  };
  useEffect(()=>{
    console.log("afet chage",capitalValue);
  },[capitalValue]);
  return (
    <>
    <button
        onClick={() => {
          ChangeCapital();
          Calculate();
        }}
      >
        click
      </button>
      <input type="number" value={capitalValue} />
    </>
  );
};

Answer 4

您可以使用输入字段中的 onChange 事件来获取当前值。

 const [currentValue, setCurrentValue] = useState[''] const changeHandler = (e:any) => { e.preventDefault(); const { value } = e.target console.log('value', value); setCurrentValue(value) }

 <input type="string" value={currentValue} onChange={(e:any) => changeHandler(e)}/>

Answer 5

在受控组件的情况下，其他成员已经给出了答案，我只是想给你一个关于非受控组件的想法。

假设我们正在处理一个不受控制的组件（“输入”元素），那么我们如何获得该值。

    1. import { React, useState, useRef, useEffect } from "react";
    2. 
    3. const CompoundIntrest = () => {
    4. const [capitalValue, setcapitalValue] = useState(1000);
    5. const inputRef = useRef(null);
    6. 
    7. useEffect(() => {
    8.  console.log(capitalValue);
    9. }, [capitalValue]);
   10.
   11. const ChangeCapital = () => {
   12.   setcapitalValue(inputRef.current.value - 100);
   13. };
   14. 
   15. return (
   16.   <>
   17.     <button onClick={ChangeCapital}>click</button>
   18.     <input ref={inputRef} type="number" />
   19.   </>
   20.  );
   21. };
   22. 
   23. export default CompoundIntrest;

在第 5 行，我们使用 react 的useRef钩子创建了一个初始值为null的 ref，稍后将用于存储input元素的引用。

在第 18 行，我们将inputRef分配给input元素的 ref，它将用于从字段中获取值。

在第 12 行，我们将input的值作为inputRef.current.value 。

要检查button的capitalValue状态onClick事件的值的更新，我们可以使用 react 的useEffect钩子（从第 7 行到第 9 行也是如此）。

PS ：请让我知道这是否消除了您的疑问。 感谢您阅读答案。

Answer 6

您的代码很好，并且您的状态已成功更新，问题是调用控制台的时间。 react 处理您的代码async ，这意味着它启动了您的 changeCapital，并且在 change capital 函数完成之前它调用了计算函数，因此您的 state 的值是先前的值。

你需要在其他地方调用你的计算函数：

1. 您可以在UseEffect 挂钩中调用它，这样只要您的状态成功更改，您的函数就会被调用，或者

2. 您可以在输入字段的“onchange”事件中调用您的计算

如果你想要更好的解决方案，第一个比第二个反应更灵敏