React:编辑和替换用户输入(onChange)

Question

Wassup Guys，

我目前正在编写一个react应用程序。我有一个输入标签，用户可以在其中输入一些内容。在我的情况下，我只需要数字和短划线(-(。然而，应该直接处理输入(这意味着我在后台一直运行我的方法，每个数字后面都有用户的输入(。为了编写规则，我如何使用此输入来更正数字/数字输入
例如，如果有人写">--/---"；它应该显示一个空白字符串"&"；。我需要这个，以便为我的用户输入编写一个日期时间清理程序。

下面是我的代码。提前感谢！

import React, { useState } from "react";
import "./styles.css";
export const dateFormatter = (input) => {
return input;
};
export default function App() {
const [state, setState] = useState("");
const handleInput = (date) => {
const inputValue = date.target.value;
// setState(dateFormatter(inputValue));
console.log("Not allowed! Only tests");
};
return (
<div className="App">
<input onChange={handleInput} defaultValue={state} maxLength="10" />
</div>
);
}

test.js(行为(

it("should handle initial input / reset input", () => {
//Initial
expect(dateFormatter("")).toBe("");
// Removal
expect(dateFormatter("--/--/---")).toBe("");
expect(dateFormatter("-/--/----")).toBe("");
expect(dateFormatter("--/-/----")).toBe("");
expect(dateFormatter("--/------")).toBe("");
expect(dateFormatter("----/----")).toBe("");
});
// Non-Ambiguous
it("should shift digit left to right", () => {
//Initial
expect(dateFormatter("")).toBe("");
it("should handle initial digit", () => {
// Right to left block (1 Variant)
expect(dateFormatter("0")).toBe("0-/--/----");
expect(dateFormatter("1")).toBe("1-/--/----");
expect(dateFormatter("2")).toBe("2-/--/----");
expect(dateFormatter("3")).toBe("3-/--/----");
expect(dateFormatter("4")).toBe("4-/--/----");
expect(dateFormatter("5")).toBe("5-/--/----");
expect(dateFormatter("6")).toBe("6-/--/----");
expect(dateFormatter("7")).toBe("7-/--/----");
expect(dateFormatter("8")).toBe("8-/--/----");
expect(dateFormatter("9")).toBe("9-/--/----");
});
// Right to left block (1 Variant)
it("should handle block shifting", () => {
expect(dateFormatter("9-/--/----8")).toBe("98/--/----");
expect(dateFormatter("98/--/----7")).toBe("98/7-/----");
expect(dateFormatter("98/7-/----6")).toBe("98/76/----");
expect(dateFormatter("98/76/----5")).toBe("98/76/5---");
expect(dateFormatter("98/76/5---0")).toBe("98/76/5---");
expect(dateFormatter("98/76/50--4")).toBe("98/76/504-");
});
it("should handle delimiter", () => {
expect(dateFormatter("9-/--/----/")).toBe("09/--/----");
expect(dateFormatter("09/--/----0")).toBe("09/0-/----");
expect(dateFormatter("09/--/----/")).toBe("09/--/----");
expect(dateFormatter("09/0-/----/")).toBe("09/00/----"); // geht nicht
expect(dateFormatter("09/--/----/")).toBe("09/00/----");
});
it("should handle limits & delete", () => {
expect(dateFormatter("09/00/0000/")).toBe("09/00/0000");
expect(dateFormatter("09/00/000")).toBe("09/00/----");
expect(dateFormatter("09/00/---")).toBe("09/--/----");
expect(dateFormatter("09/0/----")).toBe("09/--/----");
expect(dateFormatter("0/00/----")).toBe("--/--/----");
expect(dateFormatter("09/-/----")).toBe("--/--/----");
});
it("should handle adding anywhere", () => {
// add anywhere
expect(dateFormatter("-9-/--/----")).toBe("9-/--/----");
expect(dateFormatter("--/-9-/----")).toBe("9-/--/----");
expect(dateFormatter("--/--/--9--")).toBe("9-/--/----");
expect(dateFormatter("10/--/--9--")).toBe("10/9-/----");
expect(dateFormatter("09/00/00001")).toBe("09/00/00001");
expect(dateFormatter("09/00/000")).toBe("09/00/----");
expect(dateFormatter("09/001/00000")).toBe("09/01/0000");
});
it("should handle deleting anywhere", () => {
// delete anywhere
expect(dateFormatter("0/00/----")).toBe("--/--/----");
expect(dateFormatter("09/00/000")).toBe("09/00/----");
expect(dateFormatter("09/00/----0")).toBe("09/00/0---");
expect(dateFormatter("09/00/0---1")).toBe("09/00/01--");
expect(dateFormatter("09/00/0---1")).toBe("09/00/01--");
});
it("should no year limits", () => {
// ambigous - year on the left side?!
// allow only when right side is years - only then!
expect(dateFormatter("09/00/00001")).toBe("09/00/00001");
expect(dateFormatter("09/00/000012")).toBe("09/00/000012");
});
```

Answer 1

我认为您正在讨论使用某种Mask作为用户输入，对吧？

您可以制作一个使用Regexp的函数来验证您选择的格式。

此功能应该在keyup事件上执行，当用户触摸键盘上的输入时，该事件是正确的。

类似这样的东西：

import React, { useState } from "react";
import "./styles.css";
export const dateFormatter = (input) => {
return input;
};
export default function App() {
const [state, setState] = useState("");
const [maskedState, setMaskedState] = useState("");
const dateMask = () => {
setMaskedState(maskedState.replace(/D/g, "")
.replace(/(d{2})(d)/, " $1 / $2")
.replace(/(d{2})(d)/, "$1 / $2")
.replace(/( d{4})d+?$/, "$1"));
}
const rawDate = (date) => {
setState(date.split(" / ").reverse().join("-").replace(" ", ""));
}
const handleInput = (date) => {
const inputValue = date.target.value;
dateMask(inputValue);
rawDate(inputValue);
console.log("Not allowed! Only tests");
};
return (
<div className="App">
<input onKeyUp={handleInput} defaultValue={maskedState} maxLength="10" />
</div>
);
}