Javascript 如何将参照指定给多个零部件

我正在使用React使用

array.map

如何从列表中禁用单击的按钮

这是我的代码：

  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>
    );
  }
}

onRunClick（act，e）{
this.refs.btn.setAttribute（“disabled”，true）；
}
渲染（）{
返回(
{
this.state.acts.map（（act）=>{
让boundActRunClick=this.onRunClick.bind（this，act）；
返回(

名称：{act.Name}，URL:{act.URL}
跑

)
})
}
);
}
}

---

使用

refs

无效。。。我认为我无法添加状态，因为有多个按钮。

您应该使用

ref callback

而不是ref，而且是的，您需要多个ref，数组应该很好

根据文件：

React支持一个特殊属性，可以附加到任何 组成部分。ref属性接受一个

回调

函数，并且

回调

将在安装组件后立即执行 或未安装

在HTML元素上使用ref属性时，

ref回调

接收基础DOM元素作为其参数

ref回调在
componentDidMount
之前调用，或者
componentdiddupdate
生命周期挂钩

使用ref回调仅设置类的属性是一种常见的方法
用于访问DOM元素的模式。首选的方法是设置
属性在ref回调函数中，如上例所示。甚至还有
一种较短的编写方法：
ref={input=>this.textInput=input}。

字符串引用是传统的，根据：

传统API:字符串引用

如果您以前与React合作过，您可能会熟悉一位年长的
API，其中ref属性是字符串，如“textInput”，DOM
节点的访问方式为
this.refs.textInput
。我们建议不要这样做
因为字符串引用有一些问题，被认为是遗留的，并且
可能在将来的某个版本中删除。如果你是
当前使用
this.refs.textInput
访问
refs
，我们建议
而不是回调模式

constructor（）{
超级（）；
this.btn=[]；
}
点击（act、索引、e）{
this.btn[index].setAttribute（“已禁用”，true）；
}
渲染（）{
返回(
{
this.state.acts.map（（act，index）=>{
让boundActRunClick=this.onRunClick.bind（this，act，index）；
返回(

名称：{act.Name}，URL:{act.URL}
this.btn[index]=ref}onClick={boundActRunClick}>Run

)
})
}
);
}
像@shubhamkhattri的答案一样，使用
ref
是一个选项。您也可以通过状态实现所需的行为

示例（单个禁用按钮选项）

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
已禁用：“”
};
}
点击（act、索引、e）{
this.setState（{disabled:act._id}）；
}
render（）{
返回(
{
this.state.acts.map（（act，index）=>{
让boundActRunClick=this.onRunClick.bind（this，act，index）；
返回(

名称：{act.Name}，URL:{act.URL}
跑

)
})
}
);
}
}

示例（多个禁用按钮选项）

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
按钮：{}
};
}
点击（act、索引、e）{
this.setState（（prevState）=>{
const buttons=Object.assign（{}，prevState.buttons，{[act.\u id]：！prevState.buttons[act.\u id]}）；
返回{按钮}；
});
}
render（）{
返回(
{
this.state.acts.map（（act，index）=>{
让boundActRunClick=this.onRunClick.bind（this，act，index）；
返回(

名称：{act.Name}，URL:{act.URL}
跑

)
})
}
);
}
}
您可以使用npm模块（我的一个小型库）来完成此操作

import React from 'react';
import MultiRef from 'react-multi-ref';

class Foo extends React.Component {
  _actRefs = new MultiRef();

  onRunClick(act, e) {
    this._actRefs.map.get(act._id).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={this._actRefs.ref(act._id)} onClick={boundActRunClick}>Run</button>
              </p>
            )
          })
        }
      </div>
    );
  }
}

从“React”导入React；
从“react multi-ref”导入MultiRef；
类Foo扩展了React.Component{
_actRefs=新的MultiRef（）；
点击（act，e）{
这是._actRefs.map.get（act._id）.setAttribute（“disabled”，true）；
}
渲染（）{
返回(
{
this.state.acts.map（（act）=>{
让boundActRunClick=this.onRunClick.bind（this，act）；
返回(

名称：{act.Name}，URL:{act.URL}
跑

)
})
}
);
}
}

虽然在这种特定情况下，您只想更改元素上的属性，而不是使用ref，但您应该通过
上的state和props来更改，如中所示。但是，如果您需要执行其他操作（在按钮上调用命令式DOM方法、读取非受控输入元素的值、读取元素的屏幕位置等），则需要使用如下引用。
对于功能组件（React 16+），您可以按如下方式进行操作：

/* 
 * @param {Object|Function} forwardedRef callback ref function  or ref object that `refToAssign` will be assigned to
 * @param {Object} refToAssign React ref object
 */
export function assignForwardedRefs(forwardedRef, refToAssign) {
  if (forwardedRef) {
    if (typeof forwardedRef === 'function') {
      forwardedRef(refToAssign)
    } else {
      forwardedRef.current = refToAssign
    }
  }
}


function MyComponent({
  forwardedRef
}) {
   const innerRef = useRef()

   function setRef(ref) {
     assignForwardedRefs(forwardedRef, ref)
     innerRef.current = ref
   }

   return <div ref={setRef}>Hello World!</div>
}

export default React.forwardRef((props, ref) => <MyComponent {...props} forwardedRef={ref} />)

/*
*@param{Object | Function}forwardedRef回调ref函数或将分配给'refToAssign'的ref对象
*@param{Object}ref分配React ref对象
*/
导出函数assignForwardedRefs（forwardedRef，refToAssign）{
if（forwardedRef）{
if（typeof forwardedRef==='function'）{
forwardedRef（参考ToAssign）
}否则{
前向引用
class App extends Component{
  constructor() {
    super();
    this.state = {
      buttons: {}
    };
  }

  onRunClick(act, index, e) {
    this.setState((prevState) => { 
      const buttons = Object.assign({}, prevState.buttons, { [act._id]: !prevState.buttons[act._id] });
      return { buttons };
    });
  }

  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 disabled={this.state.buttons[act._id] || false} onClick={boundActRunClick}>Run</button>
              </p>
            )
          })
        }
      </div>
    );
  }
}

import React from 'react';
import MultiRef from 'react-multi-ref';

class Foo extends React.Component {
  _actRefs = new MultiRef();

  onRunClick(act, e) {
    this._actRefs.map.get(act._id).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={this._actRefs.ref(act._id)} onClick={boundActRunClick}>Run</button>
              </p>
            )
          })
        }
      </div>
    );
  }
}

/* 
 * @param {Object|Function} forwardedRef callback ref function  or ref object that `refToAssign` will be assigned to
 * @param {Object} refToAssign React ref object
 */
export function assignForwardedRefs(forwardedRef, refToAssign) {
  if (forwardedRef) {
    if (typeof forwardedRef === 'function') {
      forwardedRef(refToAssign)
    } else {
      forwardedRef.current = refToAssign
    }
  }
}


function MyComponent({
  forwardedRef
}) {
   const innerRef = useRef()

   function setRef(ref) {
     assignForwardedRefs(forwardedRef, ref)
     innerRef.current = ref
   }

   return <div ref={setRef}>Hello World!</div>
}

export default React.forwardRef((props, ref) => <MyComponent {...props} forwardedRef={ref} />)