Не работает текстовый ref React.js

Question

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class F extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        name: 'User'
      };
  }

  Input(){
    this.setState({name: this.refs.Txt.value})
  }   

  render() {
    return (
      <div>
        <div>Привет {this.state.name}!</div>
        <input ref = "Txt" onChange={this.Input}></input>
      </div>
    );
  }
}

ReactDOM.render(
  <F/>,
  document.getElementById('root')
);

Получаю ошибку:

TypeError: Cannot read property 'value' of undefined

Answer 1

Если Вы хотите получить value input'a при определенном событии, то ref'ы Вам не нужны:

return (
  <div>
    <input 
      onChange={event => this.setState({ name: event.target.value })}      
      value={this.state.name} 
    />
  </div>
)

Но если они все же необходимы, то для их создания стоит использовать createRef (классы) или useRef (хуки):

// классы
constructor(props) {
  super(props);
  this.myRef = React.createRef()
}
console.log(this.myRef.current)
render (
  return <div ref={this.myRef} />
)

// хуки
const myRef = React.useRef()
console.log(myRef.current)
return <div ref={myRef} />

БЛОГ НА HUSL

Не работает текстовый ref React.js

Ответы (1 шт):