通过按下按钮显示输入框中的值

Question

目标：
当您按下按钮“showvalue”

时，在控制台中显示元素 id ttt 的值

问题：
代码无法运行我缺少代码的哪一部分？

Stackblitz：
https://stackblitz.com/edit/react-ts-sgczgk?

信息：
React TS 新手

谢谢！

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

interface AppProps {}
interface AppState {
  name: string;
}

class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);

    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  public textInput;

  focusTextInput() {
    console.log(this.textInput.value);
  }

  render() {
    return (
      <div>
        <input id="ttt" type="text" ref={this.textInput} />

        <input type="button" value="showvalue" onClick={this.focusTextInput} />
      </div>
    );
  }
}

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

Answer 1

this.textInput 不是 HtmlInputelement 它的 RefObject。如果你想访问底层元素，你应该使用 this.textInput.current.value

Fixed fork

顺便说一句，如果您使用的是打字稿，您应该正确地注释您的类型。

如果您将 public textInput; 注释为 public textInput : RefObject<HtmlInputElement>;，它会警告您 value 在类型 RefObject<HtmlInputElement>

上不存在

通过按下按钮显示输入框中的值

Show value from input box by pressing the button

typescript

react-tsx

react-typescript