tengo una matriz de datos
const projectTypeValues = [ { name: 'Hour', value: 'hour'}, { name: 'Day', value: 'day'}, { name: 'Session', value: 'session'}, { name: 'project', value: 'project'}]A partir de ahí, muestro los botones en un grupo de botones de interfaz de usuario de material a través de un bucle.
{projectTypeValues.map(element=> <Button variant="contained" color="primary">{element.name}</Button> )}¿Cómo implemento una función onClick que hará que los otros botones en el bucle se deshabiliten, excepto el que se hizo clic?
Puede administrarlo almacenando un valor de botón seleccionado en el estado y verificando el tiempo disabled . Puede usar el atributo de botón disabled para deshabilitar. Puede almacenar un valor unique para deshabilitar el botón coincidente como name o id .
Si usamos el name para seleccionar el botón, entonces debemos verificar de esta manera.
disabled={currentSelect && currentSelect !== element.name}Ejemplo:
const projectTypeValues = [ { name: "Hour", value: "hour" }, { name: "Day", value: "day" }, { name: "Session", value: "session" }, { name: "project", value: "project" } ]; const App = () => { const [currentSelect, setSelect] = React.useState(null); console.log(currentSelect); return ( <div> {projectTypeValues.map((element) => ( <div style={{ padding: "10px" }} key={element.name}> <button disabled={currentSelect && currentSelect !== element.name} variant="contained" color="primary" onClick={() => setSelect(element.name)} > {element.name} </button> </div> ))} </div> ); }; ReactDOM.render(<App />, document.getElementById("root")); <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js" ></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" ></script> <div id="root"></div>import React from "react"; function App() { const [disable, setDisable] = React.useState(false); return ( <button variant="contained" color="primary" disabled={disable} onClick={() => setDisable(true)}> {element.name} </button> ); }Debe definir un state para el botón seleccionado, algo como esto:
const [selectedButtonIndex, setSelectedButtonIndex] = useState(-1)
entonces necesita usar el map y obtener el índice y disable u otros botones:
{projectTypeValues.map((element, index)=> <Button variant="contained" disabled={index !== -1 && index !== selectedButtonIndex} onClick={() => setSelectedButtonIndex(index)} color="primary">{element.name</Button> )} Nota: comencé con -1 como valor inicial, ya que esto habilita todos los botones inicialmente y luego bloquea su elección. Podría usar otro estado para señalar el hecho de que se ha hecho una elección.