通过 react ref 获取锚组件，并更新其 href 字段

Posted 2023-03-16

【中文标题】通过 react ref 获取锚组件，并更新其 href 字段

【英文标题】：Get anchor component by react ref, and update it's href field

【发布时间】：2021-07-11 12:18:11

【问题描述】：

我有一个反应代码，其中有“”组件。当我单击“”时，我想更改它的 href 字段。为此，我有“ref”来获取“onclick”方法中的组件，如下所示：

class SomeComponent 
    public ref: React.RefObject<any>;

    constructor(props: any) 
        super(props);
        this.ref = React.createRef();
    

    render() 
        <a
          href="#"
          ref= this.ref 
          onClick=this.clicked()
        />
     

    private clicked() 
        const link = this.ref.current;
        link.href = "some_link"; // This doesn't have any effect on the "a" element
    

但结果“href”没有得到更新。单击后它也保持为“#”。知道如何使它工作吗？

【问题讨论】：

我认为您应该将onClick=this.clicked() 更改为onClick=this.clicked。因为您正在调用点击而不是传递它的引用。

您是否还希望在点击后重定向到链接？

我只想更新 href。 clicked 被调用并且链接也被提取。但是 href 没有因此而更新。

【参考方案1】：

您发布的代码中有很多错别字或错误：

缺少extends React.Component。 在render() 中缺少return。 调用this.clicked() 而不是将函数传递给onClick。 在分配给 link 之前不检查它是否不是 null。 不在点击事件上调用e.preventDefault() 以防止重新呈现为“#”。

您可以修复所有这些错误，并且它大部分会起作用，但如果组件因任何原因重新渲染，那么 href 将返回到 "#"，因为这就是在render()中设置。

class SomeComponent extends React.Component 
  public ref: React.RefObject<htmlAnchorElement>;

  constructor(props: ) 
    super(props);
    this.ref = React.createRef();
  

  render() 
    return (
      <a href="#" ref=this.ref onClick=this.clicked>
        Anchor Text
      </a>
    );
  

  private clicked = (e: React.MouseEvent) => 
    const link = this.ref.current;
    if (link && link.href === "#" ) 
      e.preventDefault();
      link.href = "some_link";
    
  ;

只使用状态

当你是首先设置href的人时，通过DOM操作修改href没有任何意义。将href 的当前值存储在this.state 中，并使用href=this.state.href 呈现您的链接。

我们仍然需要有条件地调用e.preventDefault() 只有当href 是"#" 所以这仍然是一个可以改进的奇怪设计。也许显示一个div，直到它点击一个a之后？但是根据您的要求，这将起作用：

class SomeComponent extends React.Component<,  href: string > 
  constructor(props: ) 
    super(props);
    this.state = 
      href: "#"
    ;
  

  render() 
    return (
      <a href=this.state.href onClick=this.clicked>
        Anchor Text
      </a>
    );
  

  private clicked = (e: React.MouseEvent) => 
    if ( this.state.href === "#" ) 
      e.preventDefault();
      this.setState( href: "some_link" );
    
  ;