WedX - журнал о программировании и компьютерных науках

К чему это относится при привязке функции обратного вызова события в компоненте React с нулевым аргументом?

В этом руководстве по React нажмите кнопку функция обратного вызова события внутри презентационного компонента React явно привязана к null:

<button onClick={_this.props.toggleActive.bind(null, user.id)}>Toggle Active</button>

Однако внутри функции обратного вызова ключевое слово this используется для доступа к состоянию компонента React Container:

toggleActive: function(userId) {
   ...
   var newState = Object.assign({}, this.state)
   ...
}

Я не понимаю, почему этот пример работает, когда this должно равняться null или, в нестрогом режиме, глобальному объекту window. Может ли кто-нибудь сказать мне, почему пример все равно работает?

Соответствующий Codepen можно найти здесь.

reactjs javascript bind dom-events
21.04.2017

  • я точно не знаю, но по моему опыту, если вы передадите null в качестве аргумента контекста, он будет проигнорирован. 21.04.2017

Ответы:


1 
<button onClick={_this.props.toggleActive.bind(null, user.id)}>Toggle Active</button>

Здесь вы привязываете метод к null, а не к экземпляру. Следовательно, вы не можете получить доступ к this внутри метода, поэтому this не будет работать.

21.04.2017
  • Это именно то, чего я ожидал, но, как указано в моем первоначальном вопросе, это работает, что меня удивило. Мой вопрос в том, почему это работает. Я думаю, что это должно потерпеть неудачу. 21.04.2017

    • 2

    Раньше я ошибался и не понял вопроса. Посмотрите на следующий код: -

    function a(){
    this.x = 5;
    this.y = function(){
        console.log(this.x)
    }
}
var x = 20;
var c = new a();
var d = c.y.bind(null);
d(); // prints 20 and not null or undefined

    когда нуль передается в качестве контекста в функции связывания, функция сохраняет свой исходный контекст, то есть глобальную область здесь (контекст, в котором функция d определена). Однако, если в функцию связывания был передан некоторый контекст, функция напечатала бы «x» свойство этого контекста.

    Точно так же, когда вы передаете null в

    <button onClick={_this.props.toggleActive.bind(null, user.id)}>Toggle Active</button>

    При триггере контекст внутри функции toggleActive является контекстом, в котором она определена, то есть контекстом UserListContainer. Следовательно, он может получить доступ к своему состоянию.

    21.04.2017
  • Спасибо за разъяснения. У вас есть ссылка, где говорится, что аргументы null игнорируются привязкой? Например, в документации MDN это вообще не упоминается. 24.04.2017
    • Новые материалы
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
    ИИ в аэрокосмической отрасли
    Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..
    Для любых предложений по сайту: [email protected]