Как подключить свой javascript в react?

Question

[mosikus]

Внутри реакта

<input id="txtF" type="number" onKeyPress="return check(event,value)" onInput="checkLength(3,this)" />
 
<input  type="number" onKeyPress="return check(event,value)" onInput="checkLength(4,this)" />
   
<input  type="number" onKeyPress="return check(event,value)" onInput="checkLength(5,this)" />

Создаю файл code.js с кодом и экспортирую

function checkLength(len,ele){
  var fieldLength = ele.value.length;
  if(fieldLength <= len){
    return true;
  }
  else
  {
    var str = ele.value;
    str = str.substring(0, str.length - 1);
    ele.value = str;
  }
}

export default checkLength;

В реакте пишу импорт
import code from './code.js';
Но это не работает(должно работать ограничение в инпуте на количество символов). Подскажите, пожалуйста, я совсем осёл.

Comments

[i1yas]

Должно работать.
Как функцию вызываете, откуда?

[Антон Спирин]

Может стоит хотя бы глазом заглянуть в документацию React?

Answer 1

[i1yas]

onInput="checkLength(3,this)"
JSX - не html. Обработка событий в JSX. И вообще нужно почитать побольше про JSX.
Странное использование this, он не будет указывать куда надо, если так нужен DOM элемент, то нужно вытащить его из события:

<input id="txtF" type="number" onInput={e => checkLength(3, e.target)} />

Comments

[mosikus]

'checkLength' is not defined no-undef

[i1yas]

durak22212, а ну да, при импорте лучше так написать
import checkLength from './code.js';
В этом месте вы решаете, как будет называться ваша импортируемая функция. Если оставить как было, то нужно изменить вызов

<input id="txtF" type="number" onInput={e => code(3, e.target)} />