在单个 MUI/React TextField 中处理多个项目答案

【问题标题】：Handling multiple items in a single MUI/React TextField在单个 MUI/React TextField 中处理多个项目
【发布时间】：2022-12-06 00:54:36
【问题描述】：

我是 JS、React 和 MUI 的新手，我有一个应该接受多个值的 MUI TextField，例如

1*10 5*50 13*250 5*50 1*10

3*33.33 4*25 3*33.33

在一条线上。元素由正整数、星号和正浮点数/整数组成。解决这个问题的最佳方法是什么？

我试过写一个变化时处理程序和用于模式识别的正则表达式。

const format = /[1-9]+[0-9]*\*[0-9]*[\.]?[0-9]*/g

这应该匹配所有可能的值，乘法星号后没有前导零和可能的小数。数字是任意的。

我无法思考如何禁用用户输入/即时删除与此模式不匹配的所有内容，因为变化时按下按钮后立即更改 TextField 值。

有没有办法掩盖这个？

有没有更好的方法来进行这种输入格式化？

【问题讨论】：

标签： javascript reactjs regex material-ui

【解决方案1】：

如果你想匹配整个字符串，按照你要实现的模式，我会这样做

^(?:d+*d*(?:.d*)? ?)*$

这是一个工作示例https://regex101.com/r/o8rvWH/1

如果你看得到匹配的模式，你可以这样做

(d+*d*(?:.d*)?)

这是一个工作示例https://regex101.com/r/OtfWIp/1

【讨论】：

【解决方案2】：

这是我的解决方案，其中包括您的大部分必需品。不会遗漏前导零，但会用正则表达式排除。

([1-9]d**(?:0.(?=S+[0-9])d+|[1-9]d*(?:.d+)?)(?= |$))+

例子： https://regex101.com/r/T9I7IV/1

我不熟悉 javascript，所以你可能需要更改 S.

【讨论】：