[英]React: set value with two last input numbers
遇到情況,我不知道如何解決。 在此輸入中寫入數字時,無論我輸入多少個數字,我都只想看到最后插入的兩個數字。 例子:
Input = 5 Value = 5
Input = 59 Value = 59
Input = 597 Value = 97
Input = 5970 Value = 70
Input = 59701 Value = 01
等等。
const [number, setNumber] = useState(0);
function handleChange(e) {
setNumber(e.target.value);
}
return (
<div>
<input type="text" maxLength="2" value={number} onChange={handleChange} />
</div>
)
轉移到字符串
然后使用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>
或者更復雜的方式如下
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>
一旦你完全控制了處理程序 function 綁定到onChange
和value
,就不需要maxLength
defaultValue
相關的道具。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.