Как я могу проверить значение ввода при вводе с клавиатуры пользователя? - PullRequest
Новая
       13

Как я могу проверить значение ввода при вводе с клавиатуры пользователя?

0 голосов
/ 13 мая 2019

Как проверить введенное значение формы при вводе пользователем или при изменении?Я пытаюсь прочитать state, но это немного поздно / не в реальном времени.

Я подумываю использовать переменную / свойство класса и изменить его, но боюсь, что это оскорбит принципала React.

Существует ли правильный способ создания проверки формы в реальном времени, например this в React?

1 Ответ

1 голос
/ 13 мая 2019

Валидация настолько широко используется, что мы можем найти десятки хороших способов сделать это с помощью реакции.Мне нравится использовать следующее:

Вместо того, чтобы просто хранить значение ваших входов в состоянии, вы можете сделать более сложный объект для каждого.Давайте начнем с определения формы с 2 входами: name и age.Первым шагом будет описание формы в состоянии.Нечто подобное: 

state = {
    form:{
        name:{
            value : '',
            valid : true,
            rules:{
                minLength : 3
            }
        },
        age:{
            value : '',
            valid : true,
            rules:{
                isNumber : true
            }
        }
    }
}

Вот оно!Теперь у нас есть 2 входа, которые действительны при начальном рендеринге и имеют свои собственные правила проверки (isNumber, minLength).Теперь нам нужно написать функцию, которая проверяет состояние на лету.Давайте напишем это тогда: 

onChangeHandler = (key, value) =>{
    this.setState(state =>({
        ...state,
        form:{
            ...state.form,
            [key]:{
                ...state.form[key],
                value,
                valid : validate(value, state.form[key].rules)
            }
        }
    }))
}

Теперь у нас есть форма, описанная в состоянии, и обработчик, который обновляет состояние onChange и проверяет значение ввода при каждом вызове.Теперь единственное, что нужно сделать, это написать свою validate() функцию, и вы готовы к работе. 

validate = (value, rules) => {
let valid = true

for (let key in rules) {
    switch (key) {

        case 'minLength':
            valid = valid && minLengthValidator(value, rules[key])
            break

        case 'isNumber':
            valid = valid && isNumberValidator(value)
            break

        default: break
    }
}

    return valid
}

Теперь валидаторы ... 

minLengthValidator = (value, rule) => (value.length >= rule)
isNumberValidator = value => !isNaN(parseFloat(value)) && isFinite(value)

Готово!Теперь вызовите ваши входные данные следующим образом: 

render(){
    const { form } = this.state
    return(
        <TextField value={form.name.value} onChange={e => this.onChangeHandler('name',e.target.value)} />
    )
}

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

...