Question

我正在使用React并具有以下组件：

import React from 'react';

function Calculate({ work }) {

    var inputValue = 0;

    const totalAmountToBePaid = () => {
        inputValue++;
        console.log("=====> Total Amount To Be Paid", work);
        console.log(inputValue);
    };

    return (
        <div>
            <header className="App-header">
                <input type="number" id="amount" value={inputValue} readOnly></input>
                <button onClick={totalAmountToBePaid}>Total Amount To Be Paid</button>
            </header>
        </div>
    )
}

export default Calculate;

当我单击button时，我需要它通过调用input函数来更新totalAmountToBePaid的值。

上述解决方案只是将input的值保留为默认值0。

我是React的新手，请原谅我的无知。我想可能需要给一个state对象。

谢谢

Answer 1

是的，您缺少状态对象。

将其替换为以下

function Calculate({ work }) {
  const [inputValue, setInputValue] = React.useState(0)

    const totalAmountToBePaid = () => {

      setInputValue(inputValue+1);

        console.log("=====> Total Amount To Be Paid", work);
        console.log(inputValue);
    };

    return (
        <div>
            <header className="App-header">
                <input type="number" id="amount" value={inputValue} readOnly></input>
                <button onClick={totalAmountToBePaid}>Total Amount To Be Paid</button>
            </header>
        </div>
    )
}

工作示例https://codesandbox.io/s/dank-pine-9hk26

由于您是React的新手，我认为您应该阅读React文档。 https://reactjs.org/docs/state-and-lifecycle.html了解基本知识。

Answer 2

如果您不需要console.logs，就可以做；

const [inputValue, setInputValue] = useState(0);

<button onClick={() => setInputValue(inputValue+1)}>Total Amount To Be Paid</button>

反应-无法设置输入框的值

2 个答案: