我有一組資料
const projectTypeValues = [
{ name: 'Hour', value: 'hour'},
{ name: 'Day', value: 'day'},
{ name: 'Session', value: 'session'},
{ name: 'project', value: 'project'}]
從那里我通過回圈顯示材質 ui buttonGroup 中的按鈕。
{projectTypeValues.map(element=>
<Button variant="contained" color="primary">{element.name}</Button>
)}
我如何實作一個 onClick 函式，該函式將使回圈中的其他按鈕禁用，除了被點擊的按鈕？
uj5u.com熱心網友回復：
您可以通過將選定的按鈕值存盤在狀態中并disabled按時檢查來管理它。您可以使用按鈕disabled屬性來禁用。您可以存盤unique匹配按鈕禁用的值，例如name或id。
如果我們name用于選擇按鈕，那么我們需要像這樣檢查。
disabled={currentSelect && currentSelect !== element.name}
例子：
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>uj5u.com熱心網友回復：
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>
);
}
uj5u.com熱心網友回復：
您應該state為所選按鈕定義一個，如下所示：
const [selectedButtonIndex, setSelectedButtonIndex] = useState(-1)
那么您需要使用map并獲取索引和/disable或其他按鈕：
{projectTypeValues.map((element, index)=>
<Button variant="contained" disabled={index !== -1 && index !== selectedButtonIndex} onClick={() => setSelectedButtonIndex(index)} color="primary">{element.name</Button>
)}
注意：我從-1初始值開始，因為它最初啟用所有按鈕，然后鎖定您的選擇。您可以使用另一個狀態來表示已經做出選擇的事實。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/358734.html
標籤：javascript 反应 阿贾克斯
下一篇：洗掉功能的Spring錯誤請求