如何修改它以允許在“輸入”中輸入任意值并將按鈕值帶入“輸入”？如果用戶在輸入 3 的同時按下 1 按鈕，“輸入”中的值會從 3 增加 1。我希望他可以在沒有“洗掉”按鈕的情況下洗掉“輸入”值。
另外，我想將默認值設定為零，只讓正數從零輸入。請幫助我。
這是我的代碼。
輸入按鈕.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/>）
uj5u.com熱心網友回復：
將 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/425248.html