我有一个问题我创建了一个计数器应用程序，然后我添加了一个输入字段..但我希望我在该字段中输入的内容反映在计数部分答案

【问题标题】：I have a problem I created a counter app, and then I added an input field.. But I want what I input in the field to reflect in the count section我有一个问题我创建了一个计数器应用程序，然后我添加了一个输入字段..但我希望我在该字段中输入的内容反映在计数部分
【发布时间】：2023-01-09 16:28:35
【问题描述】：

我希望我在输入字段中输入的内容能够反映计数并能够增加或减少它（我的意思是输入的值）

我创建了两个状态...用于计数和输入的 useState

【问题讨论】：

请与我们分享代码，否则很难判断是什么问题。
请提供足够的代码，以便其他人可以更好地理解或重现问题。
我目前正在使用我的手机，所以我不能在这里发布代码

标签： reactjs react-hooks react-hook-form react-forms

【解决方案1】：

如果我理解正确的话，你想通过输入更新计数器，也想用按钮作为增量。

下面是一个快速的 React 代码，您可以找到沙箱链接here。如果您想分离输入和 counter 之间的链接，只需从 input 标记内删除行 value={counter}。

import React, { useState } from "react";

export default function App() {
  const [counter, setCounter] = useState(777);

  const updateNumber = (e) => {
    e.preventDefault();
    setCounter(Number(e.target.value));
  };

  const upNo = () => {
    setCounter(counter + 1);
  };

  const downNo = () => {
    setCounter(counter - 1);
  };

  return (
    <div className="App">
      <h1>Input your number</h1>
      <button onClick={downNo}>-</button>
      <input
        value={counter}
        name="mynumber"
        id="mynumber"
        type="number"
        onChange={updateNumber}
      />
      <button onClick={upNo}>+</button>
      <br />
      <h2>My Number: {counter}</h2>
    </div>
  );
}

【讨论】：

谢谢，这真的很有帮助。
您知道我如何使用 useReducer 挂钩实现相同的想法吗？