如何将引用分配给多个组件 [英] How to assign refs to multiple components

问题描述

我正在使用 React 使用 array.map 呈现多个数据.
如何禁用列表中点击的按钮?

这是我的代码:

 onRunClick(act, e) {this.refs.btn.setAttribute("disabled", true);}使成为 () {返回 (<div>{this.state.acts.map((act) => {让 boundActRunClick = this.onRunClick.bind(this, act);返回 (<p key={act._id}>名称:{act.name}，网址:{act.urls}<button ref='btn' onClick={boundActRunClick}>运行</button></p>)})}

);}}

使用 refs 不起作用......我认为我无法添加状态，因为有多个按钮.

解决方案

你应该使用 ref callback 而不是 ref 并且是的你需要多个 refs，一个数组应该是好的

根据文档:

<块引用>

React 支持一个特殊的属性，你可以将它附加到任何成分.ref 属性接受一个 callback 函数，并且callback 会在组件挂载后立即执行或卸载.

当 ref 属性用于 HTML 元素时，ref 回调接收底层 DOM 元素作为其参数.

ref 回调 在 componentDidMount 或componentDidUpdate 生命周期钩子.

使用 ref 回调只是为了在类上设置属性是一种常见的访问 DOM 元素的模式.首选方法是设置ref 回调中的属性，如上例所示.甚至还有一种更短的写法:ref={input =>this.textInput = input}.

String refs 是传统的，并且根据 文档:

旧 API:字符串引用

<块引用>

如果您之前使用过 React，您可能熟悉更老的API，其中 ref 属性是一个字符串，如textInput"，以及 DOM节点作为 this.refs.textInput 访问.我们建议不要这样做因为字符串引用有一些问题，被认为是遗留的，并且是可能会在未来版本之一中删除.如果你是当前使用 this.refs.textInput 访问 refs，我们推荐而是回调模式.

constructor() {极好的();this.btn = [];}onRunClick(act, index, e) {this.btn[index].setAttribute("disabled", true);}使成为 () {返回 (<div>{this.state.acts.map((act, index) => {让 boundActRunClick = this.onRunClick.bind(this, act, index);返回 (<p key={act._id}>名称:{act.name}，网址:{act.urls}<按钮 ref={(el) =>this.btn[index] = el} onClick={boundActRunClick}>Run</p>)})}

);}

I'm using React to render multiple data using array.map.
How can disable the clicked button from the list?

This is my code:

  onRunClick(act, e) {
    this.refs.btn.setAttribute("disabled", true);
  }

  render () {
    return (
      <div>
        {
          this.state.acts.map((act) => {
            let boundActRunClick = this.onRunClick.bind(this, act);

            return (
              <p key={act._id}>
                Name: {act.name}, URL(s): {act.urls}
                <button ref='btn' onClick={boundActRunClick}>Run</button>
              </p>
            )
          })
        }
      </div>
    );
  }
}

Using refs doesn't work ... I think that I can't add a state since there are multiple buttons.

解决方案

You should use ref callback instead of ref and also yes you need multiple refs, an array should be good

According to the docs:

React supports a special attribute that you can attach to any component. The ref attribute takes a callback function, and the callback will be executed immediately after the component is mounted or unmounted.

When the ref attribute is used on an HTML element, the ref callback receives the underlying DOM element as its argument.

ref callbacks are invoked before componentDidMount or componentDidUpdate lifecycle hooks.

Using the ref callback just to set a property on the class is a common pattern for accessing DOM elements. The preferred way is to set the property in the ref callback like in the above example. There is even a shorter way to write it: ref={input => this.textInput = input}.

String refs are a legacy and and as per the docs:

Legacy API: String Refs

If you worked with React before, you might be familiar with an older API where the ref attribute is a string, like "textInput", and the DOM node is accessed as this.refs.textInput. We advise against it because string refs have some issues, are considered legacy, and are likely to be removed in one of the future releases. If you’re currently using this.refs.textInput to access refs, we recommend the callback pattern instead.

constructor() {
    super();
    this.btn = [];
}
onRunClick(act, index, e) {
    this.btn[index].setAttribute("disabled", true);
  }

  render () {
    return (
      <div>
        {
          this.state.acts.map((act, index) => {
            let boundActRunClick = this.onRunClick.bind(this, act, index);

            return (
              <p key={act._id}>
                Name: {act.name}, URL(s): {act.urls}
                <button ref={(el) => this.btn[index] = el} onClick={boundActRunClick}>Run</button>
              </p>
            )
          })
        }
      </div>
    );
  }

这篇关于如何将引用分配给多个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！