1

我有一个反应代码，其中有“ < a > ”组件。当我单击“< a >”时，我想更改它的 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”没有得到更新。单击后它也保持为“#”。知道如何使它工作吗？

4

1 回答 1

2

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

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

您可以修复所有这些错误，并且它大部分都可以工作，但是如果组件由于任何原因重新渲染，那么 thehref将返回，"#"因为这是在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";
    }
  };
}

只使用状态

当您首先设置DOM 时，修改href通过 DOM 操作没有任何意义。存储in的当前值并使用.hrefhrefthis.statehref={this.state.href}

我们仍然需要e.preventDefault()仅在hrefis时有条件地调用，"#"所以这仍然是一个可以改进的奇怪设计。也许显示一个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" });
    }
  };
}
于 2021-05-25T00:38:32.530 回答