Question

我在项目中使用React Material-UI。我在render方法中放了很多组件。然后发生了奇怪的事情。某些组件无法通过'this.refs.REFNAME'引用。然后我检查了'this.refs'对象，它显示如下图：

如您所见，只有一些可以参考的组件显示在第一行。我不明白为什么。有谁可以向我解释一下？非常感谢。

更新：感谢詹姆斯，我知道第一行应该是那时“this.refs”的状态。但是，为什么有些组件不在refs对象中？

以下是代码的相关部分：

  render(){
    return <div>
      <Table ref='fromform'>
        <TableHeader>
          <TableRow>
            <TableHeaderColumn tooltip='The ID'>No.</TableHeaderColumn>
            <TableHeaderColumn tooltip='The Name'>Name</TableHeaderColumn>
            <TableHeaderColumn tooltip='The Status'>Notes</TableHeaderColumn>
          </TableRow>
        </TableHeader>
        <TableBody ref='fromformb'>
          {playerList.map(function(player, index){
              return <TableRow onTouchTap={this._onShowInfo.bind(this, index)} key={'row' + index}>
                <TableRowColumn>{index + 1}</TableRowColumn>
                <TableRowColumn>{player.name}</TableRowColumn>
                <TableRowColumn>{player.notes}</TableRowColumn>
              </TableRow>;
          }.bind(this))}
        </TableBody>
      </Table>
      <Dialog
        title='Player Info'
        ref='playerInfoDialog'>
        <form role='form' ref='fromfo'>
          <div className='form-group' ref='frowwmformb'>
            <TextField type='text' hintText='Player Name' ref='txtName' fullWidth={true} />
            <TextField type='text' hintText='Notes' ref='txtNotes' fullWidth={true} />
          </div>
        </form>
      </Dialog>
      <MainButtonGroup page='players' />
      <Spinner />
    </div>;
  }
  
  _onShowInfo(index){
    var player = playerList[index];
    console.log(this.refs);
    this.refs.playerInfoDialog.show();
    this.refs.txtName.setValue(player.name);
    this.refs.txtNotes.setValue(player.notes);
  }
}

我想用这段代码做的是在一个带有播放器列表的表格中生成行，当我点击一行时，会出现一个对话框，显示该行的数据。

但是两个'带有'txtName'和'txtNotes'引用的TextField不能被引用（就像在最后两行中一样，产生错误）。上面的图片由“_onShowInfo”方法中的“console.log”生成。我添加了一些带有随机名称的'ref'来测试。

Answer 1

我找到了解决方案。如下所示更改_onShowInfo：

_onShowInfo(tid){
  var player = playerList[index];
  this.refs.playerInfoDialog.show();
  setTimeout(function(){
    console.log(this.refs);
    this.refs.name.setValue(player.name);
    this.refs.notes.setValue(player.notes);
  }.bind(this), 0);
}

但我不知道为什么。

Answer 2

这是因为当隐藏对话框时，其子项尚未安装。所以孩子们定义的引用还没有确定。

您可以在控制台中看到它们，因为Chrome在设置时会自动更新它，因为旧版this.refs和新版本之间存在引用相等性。如果您想在给定时间点记录参考号并确保Chrome未更新，您可以执行以下操作：console.log({ ...this.refs })

另一种方法是在组件的状态中保持对所选玩家的引用。然后你会：

_onShowInfo(tid){
    var player = playerList[index];
    this.setState({selectedPlayer: player});
}

和

<Dialog
  title='Player Info'
  open={ !!this.state.selectedPlayer }
>
  <form role='form'>
    <div className='form-group'>
      <TextField type='text' hintText='Player Name' defaultValue={ this.state.player.name} fullWidth={true} />
    </div>
  </form>
</Dialog>

无法引用的奇怪对象属性

2 个答案: