Не могу использовать ref в реакции

import React, { Component } from "react";
class Learning extends Component {fName = React.createRef();onForm = e => {
e.preventDefault();console.info(this.fName.value.value);};render() {return (<div><form onSubmit = {this.onForm}><inputtype = "text" placeholder = "Enter Your First Name" ref = {this.fName} /><button type = "submit" style = {BtnStyle}>Submit</button></form></div>);}}export default Learning;

javascript reactjs

19.11.2018 05:22

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

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

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

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

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

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

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

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

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

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

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

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

308

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

Ответы 2

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

Вы должны использовать свойство current по ссылке:

console.info(this.fName.current.value);

https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs

Но рассмотрите возможность использования события изменения и состояния

class Learning extends Component {
   constructor() {
     this.state = {
       fName: ''
     }
   }
   updateName = (e) => {
      this.setState({fName: e.target.value});
   }
   onForm = (e) => {
     e.preventDefault();
     console.info(this.state.fName):
   }
   render() {
     return (
       <form onSubmit = {this.onForm}>
         <input onChange = {this.updateName} />
       </form> 
     ):
   }
}

19.11.2018 05:29

Снова проверьте реагирующие документы, ссылки, созданные с помощью React.createRef(), доступны как this.fName.current.XXX.

19.11.2018 05:33