Текстовые вводы React Auto RTL

Я хочу, чтобы все мои компоненты, использующие input[type=text], автоматически получали направление RTL или LTR на основе пользовательского ввода.

Раньше (2 или 3 года назад) я использовал jQuery, чтобы выбрать все эти входные данные и применить свой сценарий, например это. Но как лучше всего реализовать эту функцию в React?

reactjs right-to-left

01.12.2018 15:55

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

408

Ответы 1

создайте оболочку вокруг компонента Input и выполняйте свою логику внутри этого компонента :) Затем везде в коде используйте ваш <CustomInput /> вместо <input ...>.

Обновлено:

включающий пример кода обертывания элемента ввода:

import React from "react";

class CustomInput extends React.Component {
    render() {
        const {onChange, ...otherProps} = this.props;
        // Please provide onChange callback to make this Input element "Controlled"
        // otherProps are there for things like default value etc. :)
        return(
            <input type = "text" onChange = {onChange} />
        );
    }

}

export default CustomInput;

и если вы не будете использовать какие-либо методы жизненного цикла, вы даже можете реализовать этот компонент как функцию

import React from "react";

const CustomInput = ({onChange, ...otherProps}) => (
    <input type = "text" onChange = {onChange} />;
);

export default CustomInput;

Это не простой способ. У меня много входов, и я не хочу изменять их код или компонент.

— 01.12.2018 23:36

01.12.2018 16:01