Cómo asignar refs a múltiples componentes

Estoy usando React para renderizar datos múltiples usando array.map .
¿Cómo se puede desactivar el botón de la lista?

Este es mi código:

  onRunClick(act, e) { this.refs.btn.setAttribute("disabled", true); } render () { return ( 
{ this.state.acts.map((act) => { let boundActRunClick = this.onRunClick.bind(this, act); return (

Name: {act.name}, URL(s): {act.urls}

) }) }
); } }

El uso de refs no funciona … Creo que no puedo agregar un estado ya que hay varios botones.

Debería usar la ref callback de ref callback de ref en lugar de ref y también sí necesita varios refs, una matriz debería ser buena

De acuerdo con los documentos:

React admite un atributo especial que puede adjuntar a cualquier componente. El atributo ref toma una función de callback , y la callback se ejecutará inmediatamente después de montar o desmontar el componente.

Cuando el atributo ref se utiliza en un elemento HTML, la ref callback recibe el elemento DOM subyacente como su argumento.

ref callbacks se invocan antes de los ganchos de ciclo de vida de componentDidMount o componentDidUpdate .

Usar la callback de referencia solo para establecer una propiedad en la clase es un patrón común para acceder a los elementos de DOM. La forma preferida es establecer la propiedad en la callback de ref como en el ejemplo anterior. Hay incluso una manera más corta de escribirlo: ref={input => this.textInput = input}.

Los refs de cadena son un legado y, según los documentos :

Legacy API: String Refs

Si trabajó anteriormente con React, es posible que esté familiarizado con una API anterior donde el atributo ref es una cadena, como “textInput”, y se accede al nodo DOM como this.refs.textInput . Le recomendamos que no lo haga porque los refs de cadena tienen algunos problemas, se consideran heredados y es probable que se eliminen en una de las versiones futuras. Si actualmente está utilizando this.refs.textInput para acceder a this.refs.textInput , le recomendamos el patrón de callback.

 constructor() { super(); this.btn = []; } onRunClick(act, index, e) { this.btn[index].setAttribute("disabled", true); } render () { return ( 
{ this.state.acts.map((act, index) => { let boundActRunClick = this.onRunClick.bind(this, act, index); return (

Name: {act.name}, URL(s): {act.urls}

) }) }
); }

Como la respuesta de @ ShubhamKhatri usando ref es una opción. También puede lograr el comportamiento deseado con el estado.

Ejemplo (opción de botón individual desactivado)

 class App extends Component{ constructor() { super(); this.state = { disabled: '' }; } onRunClick(act, index, e) { this.setState({ disabled: act._id }); } render() { return ( 
{ this.state.acts.map((act, index) => { let boundActRunClick = this.onRunClick.bind(this, act, index); return (

Name: {act.name}, URL(s): {act.urls}

) }) }
); } }

Ejemplo (opción de botón múltiple desactivado)

 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 ( 
{ this.state.acts.map((act, index) => { let boundActRunClick = this.onRunClick.bind(this, act, index); return (

Name: {act.name}, URL(s): {act.urls}

) }) }
); } }