react

react Пример обработчика сложных состояний формы, вложенных массивов объектов (с использованием immer)

Пример хелпера, который определяет обработчики полей и также функцию изменения и получения состояния (функция получение в отличии от объекта стейта не меняется и её оказывается предпочтительнее использовать в зависимостях колбека при мемоизации):

Toggle boolean state (React). Переключение state типа boolean и переключение класса элемента на основе state

Довольно часто возникает задача добавть/удалить класс элементу в React по какому-либо переключателю, пусть даже, по одной кнопке на основе state. В примере применяем класс на компонент, по которому происходит клик.

webpack DefinePlugin Использование env переменных из файла в javascript. Пример конфигурации

DefinePlugin позволяет определить какие литералы на что надо заменить в коде при его сборке, именно там с помощью вебпака можно экспортировать переменные из файлов окружения в ваше-фронт приложение

Базования идея (требуется установить npm-пакет dotenv):

react GET Параметр из url бразузера. Пример кода

Ставим через npm query-string и делаем как-то так:


import queryString from 'query-string';
// .........


let getParams = queryString.parse(props.location.search);
let perPage  = getParams.perpage

material ui (react) Клик по selectbox с помощью selenium

Обратите внимание, что для набора пропосов:

id="call_to_action_selectbox"
value={props.entityData.call_to_action || ''}
onChange={handleButtonTextChange}
inputProps={{
  name: 'call_to_action',
  id: 'call_to_action',
}}

selectbox из материал ui построит такой html (в моем случае это было так), что id кликабельного блока (который и показывает выпадающий список) будет написан как:

select-call_to_action

Далее идея простая:

uncaught type error dispatch is not a function Ошибка с redux mapDispatchToProps

uncaught typeerror dispatch is not a function

Если вы используете mapDispatchToProps без mapStateToProps , то просто передайте null первым аргументов в connect():

const mapDispatchToProps = dispatch =>
    bindActionCreators(
        {
            getCm,
            deleteCm
        },
        dispatch
    );


export default connect(
    null,
    mapDispatchToProps
)(CmList);

Warning Failed prop type: The prop `children` is marked as required in `ForwardRef(ButtonGroup)`

Warning Failed prop type: The prop `children` is marked as required in `ForwardRef(ButtonGroup)`

Убедитесь, что у вас ни в какой момент времени не пусто содержимое компонента, который ожидает наличия вложенных элементов:

<ButtonGroup fullWidth >
// тут должно что-то быть
</ButtonGroup>

react router Редирект программно из функции (action)

Решить данную задачу можно с помощью кода вроде:

React вопосы и уточнения

React.lazy динамический импорт

Об импорте: https://ru.reactjs.org/docs/code-splitti...

react form submit Possible Unhandled Promise Rejection: TypeError: Cannot read property 'preventDefault' of undefined

Проблема возникает в обработчике:

const handleSubmit = React.useCallback((event) => {
        event.preventDefault();

        setState({ ...state, lockSubmit: true });
        console.log('csubmit state', formState);
        props.dispatch(createUser(formState, handleSuccessCreation, handleFail));

    }, [formState, setFormState]);

Если форма отправляется программно через ссылку:

Pages

Subscribe to RSS - react