Блог

У меня есть массив данных

 const projectTypeValues = [ { name: 'Hour', value: 'hour'}, { name: 'Day', value: 'day'}, { name: 'Session', value: 'session'}, { name: 'project', value: 'project'}]  

Оттуда я показываю кнопки в группе кнопок пользовательского интерфейса материала через цикл.

 {projectTypeValues.map(element=gt;  lt;Button variant="contained" color="primary"gt;{element.name}lt;/Buttongt;  )}  

как реализовать функцию onClick, которая отключит другие кнопки в цикле, кроме той, на которую был нажат?

Вы можете управлять им, сохраняя выбранное значение кнопки в состоянии и проверяя disabled время. Вы можете использовать атрибут кнопки disabled для отключения. Вы можете сохранить unique значение для соответствующей кнопки отключить как name или id .

Если мы используем name для выбора кнопку, значит, нам нужно проверить вот так.

 disabled={currentSelect amp;amp; currentSelect !== element.name}  

Пример:

 const projectTypeValues = [  { name: "Hour", value: "hour" },  { name: "Day", value: "day" },  { name: "Session", value: "session" },  { name: "project", value: "project" } ]; const App = () =gt; {  const [currentSelect, setSelect] = React.useState(null);  console.log(currentSelect);  return (  lt;divgt;  {projectTypeValues.map((element) =gt; (  lt;div style={{ padding: "10px" }} key={element.name}gt;  lt;button  disabled={currentSelect amp;amp; currentSelect !== element.name}  variant="contained"  color="primary"  onClick={() =gt; setSelect(element.name)}  gt;  {element.name}  lt;/buttongt;  lt;/divgt;  ))}  lt;/divgt;  ); };  ReactDOM.render(lt;App /gt;, document.getElementById("root")); 

 lt;script  crossorigin  src="https://unpkg.com/react@17/umd/react.production.min.js" gt;lt;/scriptgt; lt;script  crossorigin  src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" gt;lt;/scriptgt; lt;div id="root"gt;lt;/divgt; 

 import React from "react"; function App() {  const [disable, setDisable] = React.useState(false);   return (  lt;button variant="contained" color="primary"   disabled={disable} onClick={() =gt;   setDisable(true)}gt;  {element.name}   lt;/buttongt;  );  }  

Вы должны определить state для выбранной кнопки, что-то вроде этого:

const [selectedButtonIndex, setSelectedButtonIndex] = useState(-1)

затем вам нужно использовать map и получить индекс и disable или другие кнопки:

 {projectTypeValues.map((element, index)=gt;  lt;Button variant="contained" disabled={index !== -1 amp;amp; index !== selectedButtonIndex} onClick={() =gt; setSelectedButtonIndex(index)} color="primary"gt;{element.namelt;/Buttongt;  )}  

Примечание: Я начал с -1 начального значения, так как это изначально включает все кнопки, а затем блокирует ваш выбор. Вы можете использовать другое состояние, чтобы сигнализировать о том, что выбор сделан.