Отобразить окончательную форму: подписки без значений и медленный диапазон ввода - PullRequest
Новая
       15

Отобразить окончательную форму: подписки без значений и медленный диапазон ввода

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

Я использую форму реакции-финал и использую ползунки ввода диапазона HTML по умолчанию, однако они медленные и не отвечают на мобильные устройства На ПК они имеют небольшую задержку, но это не проблема. Я подозреваю, что есть проблема с производительностью, но я не уверен.

Я создал сторонний компонент, который называется Slide, следующим образом: 

const Slide = ({ input, min, max, label,...rest }) => {

    return <div>
        <label>
            {label}
        </label>
        <div className="slidecontainer">
            <input type="range"
                min={min}
                max={max}
                value={input.value}
                onChange={(event) => { input.onChange(Number(event.currentTarget.value)) }}
                className="slider" 
                step = {500}
                style={{direction:'rtls' , 'width':'100%'}}
                ></input>
        </div>
    </div>
}

Я нарочно избегал Range от smooth-ui, так как он по какой-то причине еще менее отзывчив.

Я пытался применить подписчиков, как показано в руководстве, но получаю ошибку.

Я не могу показать всю форму, так как она слишком большая, однако ее объявление выглядит следующим образом: 


 return <Form
            onSubmit={this.props.onSubmit}
            initialValues={initialValues}
            mutators={{ ...arrayMutators, setFieldData }}
            subscription={{ submitting: true, pristine: true }} // NOTICE
            render={({ handleSubmit, form: { mutators: { push, remove, setFieldData, insert } }, form, submitting, pristine, values }) => {

Помеченная строка была (вроде) скопирована из учебника в надежде, что это повысит производительность, однако это приведет к ошибке: TypeError: values is undefined

при удалении отмеченной строки все работает нормально. Кроме того, когда я добавил values: true к объекту подписчиков проблема была решена, но, насколько я понимаю, форма обновляется каждый раз при изменении поля, чего я пытаюсь избежать - и проблема с производительностью осталась. настройка values: false привела к TypeError: values is undefined

В заключение: 1) Как сделать так, чтобы мои ползунки диапазона ввода работали на мобильных устройствах плавно? 2) Как я могу получить свою форму, чтобы подписаться только на изменения в реальных потребностях (отправка формы и очистка формы)?

Заранее спасибо!

...