如何屏蔽 reactjs mui 文本字段

Question

我有这个文本字段

<TextField
    error={!!errors.imageLink}
    helperText={errors.imageLink}
    FormHelperTextProps={{ variant: "standard" }}
    placeholder="Banner Link"
    size="small"
    className={classNames([
        classes.textField,
        classes.marginTextInput,
    ])}
    value={imageLink || ""}
    onChange={(e) => this.handleChange(e, "imageLink")}
    variant="outlined"
/>

我想屏蔽 url 实现，比如用户必须先输入 http 或 https，然后再输入：// auto 然后应用链接的 rest，我该如何实现。

Answer 1

由于没有人回答这个问题，并且在 inte.net 上提供的关于 url 掩码的信息很少，我已经使用 react-text-mask 使其工作，它远非完美，但它可以为将来需要类似东西的任何人发布：

<MaskedInput
            ref={ref => inputRef(ref ? ref.inputElement : null)}
            placeholderChar={' '}
            pipe={value => {
                if(value[0] == "h" && value[1] == "t" && value[2] == "t" && value[3] == "p") {
                    if(value[4] && value[4] == "s") {
                        if (value[5] && value[5] != ":") {
                            return false;
                        } 
                        if (value[6] && value[6] != "/") {
                            return false;
                        } 
                        if (value[7] && value[7] != "/") {
                            return false;
                        }

                    } else {
                        if (value[4] && value[4] != ":") {
                            return false;
                        } 
                        if (value[5] && value[5] != "/") {
                            return false;
                        } 
                        if (value[6] && value[6] != "/") {
                            return false;
                        }
                    }
                    
                } else if (
                    value.length === 1 && value[0] !== "h" || 
                    value.length === 2 && value[0] === "h" && value[1] !== "t" || 
                    value.length === 3 && value[0] === "h" && value[1] === "t" && value[2] !== "t" || 
                    value.length === 4 && value[0] === "h" && value[1] === "t" && value[2] === "t" && value[3] !== "p"
                ) {
                    value = "https://" + value;
                }
            
                return value;
            }}
            mask={value => Array(value.length).fill(/[\d\D]/)}
            showMask={true}
            {...otherProps}
        />