javascript - 反应:用最后两个输入数字设置值
问题描述
遇到情况,我不知道如何解决。在此输入中写入数字时,无论我输入多少个数字,我都只想看到最后插入的两个数字。例子:
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>
一旦你完全控制了绑定到onChange
and的处理函数value
,就不需要maxLength
defaultValue
相关的 props。
推荐阅读
- selenium-webdriver - 如何从 Telerik(剑道)日期选择器中选择日期
- list - 在 List 和 NavigationLink 中使用 longPressAction
- javascript - 填写注册表单后,引导模式在同一模式上显示“注册成功”文本
- c# - ASP.Net Core 2.1 应用程序在作为 Windows 服务运行时找不到 appsettings.json
- python - 按行计算非 na 值并将总计保存到 pandas 中的新变量
- docker - Docker OutOfMemoryError 中的 Corda:Java 堆空间
- python - 加载生命线失败(结果显示:属性错误:模块'scipy.misc'没有属性'logsumexp')
- excel - 如何检查重复项、突出显示重复项以及计算单列中突出显示的重复项?
- html - 溢出-y:自动剪切左侧绝对定位的元素。在滚动上移动元素的解决方案
- android - 带有空参数的房间(SQLite)WHERE 子句不起作用