Reactjs 无法读取null的属性“value”？

尝试使用此.username.value时出错。我想获取要在标签中显示的文本框的值。我是个反应新手。如何使用InputRef从文本框获取变量值并显示在标签中

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Helmet from 'react-helmet';
import { createStructuredSelector } from 'reselect';
import TextBox from 'components/Atoms/TextBox';
import makeSelectTestPage from './selectors';

export class TestPage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.username ='',
    this.handelChange = this.handelChange.bind(this);
  }
  handelChange() {
    console.log("Log",this.username.value);
    <label> this.username.value</label>
  }
  render() {
    return (
      <div>
        <Helmet
          title="TestPage"
          meta={[
            { name: 'description', content: 'Description of TestPage' },
          ]}
        />
        <TextBox labelName="Input Vaue" placeholder="Test" ref={(inputRef) => { this.username = inputRef; }} defaultValue="Text" ></TextBox>
        <button onClick={this.handelChange}>Login</button>
      </div>
    );
  }
}

TestPage.propTypes = {
  dispatch: PropTypes.func.isRequired,
};

const mapStateToProps = createStructuredSelector({
  TestPage: makeSelectTestPage(),
});

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(TestPage);

---

你的问题有几个错误。尝试理解下一段代码，您将能够将其应用于示例：

类测试扩展了React.Component{ 构造器{ 超级作物； this.state={ 值：， 用户名： } } 手电筒{ this.setState{value:e.target.value} } 手舔{ this.setState{username:this.state.value} } 渲染{ 回来 {this.state.username} 登录 } } ReactDOM.render，document.getElementById'container'；