ReactStrap中innerRef使用问题：解决Cannot read property 'username'报错

我来帮你分析下这个问题——你遇到的TypeError: Cannot read property 'username' of undefined，本质是因为你还没初始化this.username，就直接尝试给它的value属性赋值了。

先看你原来的代码：

<FormGroup>
  <Label htmlFor="username"> Username</Label>
  <Input 
    innerRef={(input) => (this.username.value = input)} 
    type="text" 
    name="username" 
    id="username" 
  />
</FormGroup>

这里的问题很明确：this.username一开始是undefined，你直接访问this.username.value，自然会抛出错误。我们需要先把DOM元素挂载到this.username上，而不是直接给value赋值。

正确的实现步骤 #

1. 初始化引用（类组件场景）

如果你的组件是类组件，首先要在构造函数里初始化这个引用：

constructor(props) {
  super(props);
  // 先把this.username初始化为null，预留好位置存DOM元素
  this.username = null;
}

2. 修改innerRef的回调逻辑

把DOM元素本身赋值给this.username，而不是它的value：

<FormGroup>
  <Label htmlFor="username"> Username</Label>
  <Input 
    innerRef={(input) => (this.username = input)} 
    type="text" 
    name="username" 
    id="username" 
  />
</FormGroup>

3. 获取输入值

之后当你需要读取用户名（比如表单提交时），就可以通过this.username.value拿到输入内容了：

handleSubmit = (e) => {
  e.preventDefault();
  const inputUsername = this.username.value;
  // 这里可以处理获取到的用户名
  console.log('输入的用户名：', inputUsername);
}

更推荐的方式：使用React官方的createRef API #

React官方更推荐使用createRef来管理DOM引用，写法更清晰：

1. 创建ref

constructor(props) {
  super(props);
  this.usernameRef = React.createRef();
}

2. 绑定到Input组件

<FormGroup>
  <Label htmlFor="username"> Username</Label>
  <Input 
    innerRef={this.usernameRef}
    type="text" 
    name="username" 
    id="username" 
  />
</FormGroup>

3. 获取值

通过current属性访问DOM元素，再取value：

handleSubmit = (e) => {
  e.preventDefault();
  const inputUsername = this.usernameRef.current.value;
  console.log('输入的用户名：', inputUsername);
}

这样就能彻底解决你遇到的错误啦，核心就是先把DOM元素正确挂载到组件的引用属性上，再去访问它的value。

内容的提问来源于stack exchange，提问作者Anand