reactjs - How to do so that my field must at least be able to contain only numbers and a + in front of the number (if the user wishes)

Question

For example the user can enter: +444123454656656 OR 123454656656 - only numbers or a + in front of the number.

<TextFieldFormsy
    className="myclasse"
    variant="outlined"
    label={t("phone_number")}
    id="phone_number"
    name="phone_number"
    value={phone_number}
    onChange={handleChange}
/>

Answer 1

您可以简单地过滤 onChange 中的输入以删除您不想要的所有内容：

const isValidChar = (char, index) => {
    if(index === 0 && char === "+") {
        return true;
    } 
    return !isNaN(char);
}

const filteredInput = input.split("").filter((char, index) => isValidChar(char, index)).join("")

这是过滤器的小提琴。