轉移到字符串
然后使用slice()剪切最后 2 個數字
const result = Number(e.target.value.toString().slice(-2));
const App = () => {
const [number, setNumber] = React.useState(0);
function handleChange(e) {
const result = Number(e.target.value.toString().slice(-2));
setNumber(result);
console.log(result);
}
return (
<div className="App">
<input type="text" value={number} onChange={handleChange} />
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
或者更復雜的方式如下
使用split()，pop()，join()
const x = e.target.value.toString().split('');
const y = [x.pop(), x.pop()].reverse();
const result = Number(y.join(''));
const App = () => {
const [number, setNumber] = React.useState(0);
function handleChange(e) {
const x = e.target.value.toString().split('');
const y = [x.pop(), x.pop()].reverse();
const result = Number(y.join(''));
setNumber(result);
console.log(result);
}
return (
<div className="App">
<input type="text" value={number} onChange={handleChange} />
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
一旦你完全控制了綁定到onChangeand的處理函數value，就不需要maxLength defaultValue相關的 props。
