next.js 打字稿中的递增和递减按钮功能答案

【问题标题】：Increment and decrement button function in next.js typescriptnext.js 打字稿中的递增和递减按钮功能
【发布时间】：2021-06-06 04:14:54
【问题描述】：

我是 typescript 的新手，想在用 typescript 编写的 next.js 项目中创建递增和递减按钮功能。

export default function Home() { 
  return ( 
    <div className={styles.container}> 
       <form className={`wrapper ${styles.wrapper}`}>
          <div className={styles.headWrapper}>
            <h2>Скорость</h2>
            <input type="number" id="input" min='1'/>
            <h3>сек.</h3>
          </div>
          <div className={styles.controlBtns}>
            <button id="minus">-</button>
            <button id="plus">+</button>
          </div>
       </form>
    </div> 
  )
}

【问题讨论】：

标签： reactjs typescript next.js

【解决方案1】：

您的用例的 React 钩子方法可能如下所示：

const App: React.FunctionComponent = () => {
  const [count, setCount] = React.useState<number>(0);
  
  const inc = (event) => {
    setCount(count + 1);
  };
  
  const dec = () => {
    setCount(count - 1);
  }
 
  return (
    <div>
      <button onClick={dec}>-</button>

      <input type="number" value={count} />

      <button onClick={inc}>+</button>
    </div>
  )
}

您可以在 Next.js 项目中使用它。查看完整示例：https://codepen.io/bgoodman/pen/xxxqggK

【讨论】：