Измените входное значение с помощью useRef

#javascript #html #jquery #reactjs #material-ui

#javascript #HTML #jquery #reactjs #материал-пользовательский интерфейс

Вопрос:

Я захватил элемент с помощью пользовательского хука React. если я использую console.log(this.inputRef), я получаю:

 <input aria-invalid="false" autocomplete="off" class="MuiInputBase-input-409 MuiInput-input-394" placeholder="Type ItemCode or scan barcode" type="text" value="2">

Есть ли способ изменить значение этого элемента, используя this.inputRef ? а затем принудительно выполнить его повторный рендеринг?

1. Я не знаком с React, но предполагаю this.inputRef , что ссылка на элемент, как следует из названия, this.inputRef.value = 'foo' должна работать

2. Есть ли причина, по которой вы используете ссылку, а не состояние? Если вы управляете входным значением в состоянии (а не сохраняете ссылку на сам элемент), процесс обычно становится намного чище. Соответствующая документация по React forms

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

Ответ №1:

Похоже, то, что вы ищете, — это хук ImperativeHandle .

Из React docs:

useImperativeHandle настраивает значение экземпляра, которое предоставляется родительским компонентам при использовании ref

Приведенный ниже код должен работать для вас:

 function ValueInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    changeValue: (newValue) => {
      inputRef.current.value = newValue;
    }
  }));
  return <input ref={inputRef} aria-invalid="false" autocomplete="off" class="MuiInputBase-input-409 MuiInput-input-394" placeholder="Type ItemCode or scan barcode" type="text" value="2">
}
ValueInput = forwardRef(ValueInput);

Документация: https://reactjs.org/docs/hooks-reference.html#useimperativehandle

1. И как вы вызываете это из родительского компонента?

2. Привет @coler-j, взгляните на ссылку документации в моем ответе. В нем говорится: «В этом примере родительский компонент, который отображает <FancyInput ref={inputRef} />, сможет вызывать inputRef.current.focus()». Таким образом, вы можете использовать свой ref , чтобы вызвать его 🙂

Ответ №2:

ну, вы могли бы сделать:

 <input ref={myRef} value={myRef.current.value} />

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

Ответ №3:

может быть, это может помочь

 return(
    <input type="text" ref={inptRef}  />
    <button onClick={()=>inptRef.current.value = ""}>clear input</button>

)