React ref с использованием входного модуля Reactstrap не имеет Value prop

У меня есть компонент реакции со следующим элементом ввода:

import React, {
    Component
} from 'react';
import {Input } from 'reactstrap';     
constructor(props) {
    super(props)   
    this.test = React.createRef();       
}

render() {
    console.info(this.test.current)
    return (
         <Input ref = {this.test} defaultValue = "This is the default" />
    )
}

Я хочу получить значение Prop из ссылки {this.test} однако, когда я веду консольный журнал, я получаю следующий вывод.

Input {props: {…}, context: {…}, refs: {…}, updater: {…}, getRef: ƒ, …}
context: {}
focus: ƒ ()
getRef: ƒ ()
props: {defaultValue: "This is the default", onChange: ƒ, type: "text"}
refs: {}
state: null
updater: {isMounted: ƒ, enqueueSetState: ƒ, enqueueReplaceState: ƒ, enqueueForceUpdate: ƒ}
_reactInternalFiber: FiberNode {tag: 1, key: null, elementType: ƒ, type: ƒ, stateNode: Input, …}
_reactInternalInstance: {_processChildContext: ƒ}
isMounted: (...)
replaceState: (...)
__proto__: Component

Как получить значение, используя тег «Input» reactstrap вместо встроенного HTML-элемента «input» Dom.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
4
0
3 901
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Используйте innerRef вместо ref с компонентом ввода.

https://reactstrap.github.io/components/form/

Спасибо, это работает. Изменил мой код на: <Input innerRef = {this.test} defaultValue = "Это значение по умолчанию" onChange = {this.handleChangeEvent}/>

muso mwale 14.03.2019 23:34

Другие вопросы по теме