React-Redux: передача аргументов от обработчика к создателю действия

Я просмотрел Интернет и различные источники; Кажется, никто не относится к моему вопросу. Ближайшим может быть следующее (на которое нет ответа): Вызов функции React + Redux

Итак: я пытаюсь передать аргументы в одно из полей создателя действия, функцию под названием update, которая определит, изменилось ли значение размытой строки, и если да, то вызовет мой api для обновления. Аргументы, которые я хочу передать, - это событие (которое содержит строку, которая мне нужна как target.ParentElement) и целое число, которое представляет индекс строки в свойстве проекты моего состояния.

Создатель действий в моем магазине redux:

export const actionCreators = {
    update: (e: React.FocusEvent<HTMLInputElement> | undefined, i: number): AppThunkAction<KnownAction> => (dispatch, getState) => {
        let test = event;
        // Will put logic and api call in here and dispatch the proper action type
    }
}

И пытаюсь назвать это так:

// Inside a function rendering each row in my form 
...
<input key = {project.number} name = {name} className='trackerCell' onBlur = {(event) => { this.props.update(event, i) }} defaultValue = {project.number}/>

Где я - значение индекса, переданное в функцию рендеринга.

Все это компилирует find, однако, когда я выполняю и попадаю в функцию Обновить, е и я оба не определены; Однако мероприятие определен и выглядит так, как я ожидал увидеть е.

FWIW, формат, который я пытаюсь использовать здесь, работает в другом месте моего приложения:

requestProjects: (programNumber: number, programString: string): AppThunkAction<KnownAction> => (dispatch, getState) => {

при вызове componentWillUpdate () правильно получает число и строку, которые я могу использовать в своей логике.

Бонус: во всех моих функциях создания действий, построенных таким образом, аргументы имеет в себе 3 объекта: отправлять, getState и неопределенный. Почему не отображаются аргументы в сигнатуре вызова? Я по-другому думаю об этих аргументах?

И да, я знаю, что могу просто прикрепить значение индекса к атрибуту во входных данных, и оно появится в объекте мероприятие, но это кажется хакерским, и я действительно хочу понять, что здесь происходит.

Спасибо

ОБНОВИТЬ

В ответ на комментарий Уилла Кейна: индексная переменная i передается функции рендеринга строки от ее родителя, как таковая:

private renderProjectRow(project: ProjectTrackerState.Project, i: number) {
    let cells: JSX.Element[] = [];
    let someKey = project.number + '_started', name = project.number + '_number';
    cells.push(<input key = {project.number} name = {name} className='trackerCell' onBlur = { this._handleBlur.bind(this) } defaultValue = {project.number}/>);
// Rendering continues down here

Это допустимый числовой тип до точки события (я могу сказать, отлаживая в браузере).

Переменная события в функции обновления происходит от ... Не знаю откуда? Это загадка, которую я хотел бы разгадать. Несмотря на то, что это не определенный параметр для функции обновления, когда я вхожу в метод Обновить, событие определяется как таковое в отладчике:

Event {isTrusted: false, type: "react-blur", target: react, currentTarget: react, eventPhase: 2, …}

Очевидно, что это событие вызвало срабатывание обработчика, но как оно достигает функции Обновить, мне непонятно.

Не могли бы вы рассказать, откуда берется i в вызове this.props.update(event, i), а откуда event в функции update?

Will Cain 23.05.2018 21:12

Конечно, я изменил исходный пост, добавив обновленную информацию

broccoli_rob 23.05.2018 22:17
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
842
1

Ответы 1

Отвечая на этот вопрос, если кто-то столкнется с этой же проблемой (маловероятно, но хочу быть полезным):

Причина, по которой мои аргументы ееm> и я не были определены во время выполнения, заключается в том, что на них не ссылались при выполнении функции. Я предполагаю (все еще ищу документацию для проверки), что машинописный текст очищает ссылки на неиспользуемые параметры. Имеет смысл с точки зрения оптимизации. Добавление ссылки на чтение ееm> и я внутри функции Обновить решило мою проблему.

Вы можете добавить "noUnusedParameters": true к вашему compilerOptions в вашем файле tsconfig, и это вызовет ошибку машинописного текста для всех этих параметров, чтобы вы могли определить, когда эти чистки будут выполнены.

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