Как запретить пользователю вставлять определенные специальные символы (только разрешенные символы включают (_ -.) В форму с использованием jsx

Question

Я также хочу ограничить первый символ только цифрой или буквой.Это то, что я до сих пор запрещал пользователю вводить специальные символы:

validate(event) {
    const keycode = event.keyCode || event.which || event.type === 'paste';
    const key = String.fromCharCode(keycode);
    const pattern = new RegExp('^[a-zA-Z0-9\\_\\.\\-]$');
    return pattern.test(key) ? key : event.preventDefault();
}

const validateMyField = (currentFieldValue, props) => {
    if (currentFieldValue.match(/^[a-zA-Z0-9\\_\\.\\-]+$/)) {
        return true;
    }
    return false;
};

const templateNameValidator = createValidator(
    validateMyField,
    'You are attempting to paste with characters that are not allowed. Please remove characters and try again. (special characters can only include "_","-",".")'
);

 <Field
    className="usaa-input"
    component={Textarea}
    label="Template Name"
    name="name"
    maxLength={128}
    minRows={1}
    placeholder="Enter Template Name..."
    validate={composeValidators(required, templateNameValidator)}
    onKeyPress={this.validate}
/>

Answer 1

Может быть проще использовать контролируемый вход.Здесь мы получаем и устанавливаем значение в состояние и из него.

this.state = {inputValue: ""}

...

validateBeforeInput(e){
    if(matches the chars we want){
        this.setState({inputValue: e.target.value})    
    }
}

...
<input 
    value={this.state.inputValue}
    onChange{validateBeforeInput} // where the magic happens
/>