Позиция изменения порядка ввода в Safari

Я создал простое веб-приложение на React, которое отлично работает, однако, когда я запускаю его в Safari, оно меняет порядок расположения в зависимости от того, какое из них набирается. Вот короткое видео

Входы меняют позиции

По сути, я разделил весь код на базовые элементы, но без каких-либо изменений. Как только я удалил двухстороннюю привязку, он начал работать без этого поведения. Так это ошибка в сафари или как я могу использовать двухстороннюю привязку без этого поведения? Вот код, который я использую для рендеринга этих входных данных

inputChangedHandler = (event, controlName) => {
    const updatedControls = {
        ...this.state.controls,
        [controlName]: {
            ...this.state.controls[controlName],
            value: event.target.value,
            valid: this.checkValidity(event.target.value, this.state.controls[controlName].validation),
            touched: true
        }
    };
    this.setState({ controls: updatedControls })
}

render() {
    const formElementArray = [];
    for (let key in this.state.controls) {
        formElementArray.push({
            id: key,
            config: this.state.controls[key]
        });
    }

    let form = formElementArray.map(formElement => (
        <Input
            key = {formElement.id}
            elementType = {formElement.config.elementType}
            elementConfig = {formElement.config.elementConfig}
            value = {formElement.config.value}
            invalid = {!formElement.config.valid}
            shouldValidate = {formElement.config.validation}
            touched = {formElement.config.touched}
            changed = {(event) => this.inputChangedHandler(event, formElement.id)}
            />
    ))
return (
        <div className = {classes.Auth}>
            <form onSubmit = {this.submitHandler}>
                {form}
                <Button btnType = "Success">SUBMIT</Button>
            </form>
        </div>
    );

Я только что создал новое приложение, реагируя только на два входа, которые используют двухстороннюю привязку, и я получаю точно такой же результат

файлы с узлом с папкой узла

файлы без узла без папки узла

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
782
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это не ошибка, это стандартное поведение: Гарантирует ли JavaScript порядок собственности объекта?

Если вы хотите, чтобы порядок был согласованным, вам следует поместить ключи в controls в массив или получить массив ключей, отсортировать их и перебрать ключи в вашем методе render().

Спасибо steenuil .. Спасибо за разъяснения. В массиве есть ключи, и я даже не пытался их отсортировать, потому что все остальные браузеры все время правильно сортируют массив. Только у Safari есть эта проблема. Тогда я попробую разобрать это ... Большое спасибо

user6935527 18.12.2018 15:49

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

user6935527 18.12.2018 20:38

Другие вопросы по теме