你如何反应将按钮值输入到输入中？

Question

如何修改它以允许在 'input' 中输入任意值并将按钮值带入 'input'？如果用户在输入3的同时按下+1按钮，'input'中的值从3增加1。我希望他可以在没有“删除”按钮的情况下删除“输入”的值。
另外，我想将默认值设置为零，只让正数从零进入。请帮助我。
这是我的代码。

输入-button.jsx

import React , { useState } from "react";

const PlusButton = () => {
  const [cnt, setCnt] = useState(0);

  const onIncrease = () => {
    setCnt(prevCnt => prevCnt + 1);
  }

  const onIncrease2 = () => {
    setCnt(prevCnt => prevCnt + 10);
  }

const onIncrease2 = () => {
    setCnt(prevCnt => prevCnt + 100);
  }
  return(
    <>
      <div>
        <input type="number" min='0' placeholder='Click button or Enter a random value' value={cnt}/>
      </div>
        
      <button onClick={onIncrease}>+1</button>
      <button onClick={onIncrease2}>+10</button>
      <button onClick={onIncrease2}>+100</button>
    </>
  );
}

export default PlusButton;

(注意。我要把这个文件导入到另一个文件。比如<PlusButton/>)

Answer 1

在输入中添加 onChange。

 const onChange = (e) => {

    if (e.target.value === '') {
      setCnt(0)
      return;
    }
    if (e.target.checkValidity()) { //check if min=0
      setCnt(parseInt(e.target.value)) // allow only whole numbers using parseInt.
    }
 }

 const onIncrease = (value) => setCnt(prevCnt => prevCnt + value);
 

  <input type="number" onChange={onChange} min='0' placeholder='Click button or Enter a random value' value={cnt}/>

  <button onClick={() => onIncrease(1)}>+1</button>
  <button onClick={() => onIncrease(10)}>+10</button>
  <button onClick={() => onIncrease(100)}>+100</button>

你如何反应将按钮值输入到输入中？

How do you I React to get the button value into the input?

reactjs

button

input

counter