Детский компонент focus с использованием createRef не работает

У меня это как родитель

class TestRef extends React.Component {
  ref = React.createRef();
  render() {
    return <Hello ref = {this.ref} />;
  }
}

и мой привет такой

export default ({ ref }) => <input ref = {ref} />;

но я всегда получал {value: null}

демо https://codesandbox.io/s/7wo7qvkq8j

Проблема №1: Предупреждение: компонентам функции без сохранения состояния нельзя давать ссылки. Попытки получить доступ к этой ссылке потерпят неудачу.

— 21.09.2018 18:14

javascript reactjs ecmascript-6

21.09.2018 18:01

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 084

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вам следует заменить ref другим словом из-за конфликта с специальный реквизит. См. Мой отредактированный код: https://codesandbox.io/s/82m5lzy4vj

Но я рекомендую вам не передавать ref через реквизит. Вы можете создать ссылку на этот компонент и управлять им.

21.09.2018 18:17

Ответ принят как подходящий

ref не является стандартной опорой. Вы можете изменить его на что-то другое (myRef) или использовать пересылка ссылок:

const Hello = React.forwardRef((props,  ref) => <input ref = {ref} />);

Узел: ref forwarding работает с React 16.3 (не альфа) и выше.

Демо (песочница):

const Hello = React.forwardRef((props,  ref) => <input ref = {ref} />);

class TestRef extends React.Component {

  ref = React.createRef();
  
  componentDidMount() {
    console.info(this.ref);
    
    this.ref.current.focus(); // example of using the ref
  }
  
  render() {
    return <Hello ref = {this.ref} />;
  }
}

ReactDOM.render(<TestRef />, document.getElementById("root"));

<script crossorigin src = "https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src = "https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id = "root"></div>

что, если ваш ввод находится в цикле, мне нужно создать динамическую ссылку? codeandbox.io/s/v037n0jvp7

— 21.09.2018 18:52

Вам нужно будет создать реф для каждого из них.

— 21.09.2018 18:54

только для 2 входов фокуса omg, почему бы просто не ${'.input1).focus()

— 21.09.2018 18:56

Потому что это не jQuery :)

— 21.09.2018 18:57

21.09.2018 18:21