Значение реакции реф. пусто

У меня есть компонент реакции с неконтролируемым элементом ввода, как показано ниже:

class TestComponent {

onAddTypeClicked = el => {
    console.info(el);
    console.info(el.value);
};


render() {
    return (
        <div>
            <input
                name = "asset_types"
                ref = {el => this.assetTypesAdd = el}
            />
            <button
                type = "button"
                onClick = {e => this.onAddTypeClicked(this.assetTypesAdd)}
            />   
        </div>
    );
}

Теперь, когда я ввожу какое-то значение в поле ввода и нажимаю кнопку, ввод печатается правильно, но значение пусто. Он отлично работает, если я использую подход document.getElementById. Кто-нибудь может указать, делаю ли я что-то не так, пожалуйста?

Вы бы пробовали пройти .current? так this.onAddTypeClicked(this.assetTypesAdd.current);

— 22.11.2018 05:40

current действителен, если мы создаем ref с помощью React.createRef (), но в моем случае я использую шаблон обратного вызова.

— 22.11.2018 06:14

javascript reactjs

22.11.2018 05:31

Поведение ключевого слова "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 712

Ответы 1

Я считаю, что ваш код работает правильно, и значение доступно в this.assetTypesAdd.value и его печатное значение одинаковы. Я не уверен, откуда вы получаете пустое значение для ввода.

// Example class component
class MyComponent extends React.Component {

  onAddTypeClicked = el => {
      console.info(el.value);
      this.forceUpdate();
  };

  render() {
    return (
        <div>
            <input
                name = "asset_types"
                ref = {el => this.assetTypesAdd = el}
            />
            <button
                type = "button"
                onClick = {e => this.onAddTypeClicked(this.assetTypesAdd)}
            >
                Click me
            </button>
            {this.assetTypesAdd && 
                <div>Value of input: {this.assetTypesAdd.value}</div>}
            
        </div>
    );
  }
}

// Render it
ReactDOM.render(
  <MyComponent/>,
  document.getElementById("react")
);

button {
    width: 100px;
    height: 20px;
    display: block;
    margin: 10px 0;
}

<div id = "react"></div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Спасибо за Ваш ответ. Я только что понял, что в моем коде была ошибка.

— 22.11.2018 06:23

22.11.2018 06:13