как в React js передать свойство элементу onClick или onKeyUp?

137
19 августа 2019, 17:10

вчера начал смотреть React JS, создал скрипт, который просто добавляет на страницу таблицу с input'ами. Но мне надо на эти импуты еще повесить событие, я их прописываю, но когда запускаю страницу, таблица отображается, а вот сами события у импутов нет. Как можно их добавить?

Мой скрипт react.js

'use strict';
ReactDOM.render(
<table class="table_report">
<tr>
  <td class="td_report">
    <div id="popup">
      <div id="popup_bg" />
      <div class="form">
        <p for="inp" class="inp">
          <label>
            <input type="text" id="road" placeholder="&nbsp;" onKeyUp="searchfield(this.id)"/>
            <span class="label">Дорога назначения:</span>
            <span class="border" />
          </label>
        </p>
      </div>
    </div>
  </td>
</tr>
</table>,
document.getElementById("root")
);

на выходе получаю элемент . То есть, почему он удаляет событие?

Answer 1

Из приведенного вами кода могу сказать следующее

Во первых для того чтобы JSX элементам добавить событие их пишут не в двойных кавычках как у вас а таким образом.

onKeyUp={searchfield(this.id)}

Во вторых это плохая практика так не впихивайте все в внутрь ReactDOM.render-а. Создавайте отдельные компоненты и добавляте их.Так учитсья надо используя правильные практики так проще и читать и поддерживать ваш код.

В третьих у вот этого тега

 <span class="border" />

должно быть закрывающий span

В четвертых классы в JSX пишутсья не так class="inp" а className="имя класса"

В пятых React всегда если какой то элемент не рендеритсья на страницу то об этом сообщает соответсвенной ошибкой в консоли в первую очередь смотрите туда.

READ ALSO
Javascript: запись fn(arg1)(arg2)&hellip;(argN)

Javascript: запись fn(arg1)(arg2)…(argN)

Прошу прощения, если вопрос идиотскийИзучаю JS и функциональное программирование, и не совсем понимаю что означает данная запись

127
Как убрать zoom на amcharts 4?

Как убрать zoom на amcharts 4?

Есть небольшая проблема при использовании amchartsМне нужно построить такой график (зависимость количества товаров от цены)

137
как удалить картинку js? [закрыт]

как удалить картинку js? [закрыт]

Решение вашей задачи:

129