问题描述
我想做什么，当一个按钮被点击时，在onclick时它的变体（材质ui按钮应该从轮廓变为包含）或者只是它的背景应该改变。 （请不要建议 onFocus 属性，因为这是另一个组件中的另一个按钮，单击时焦点会丢失。所以这里 onFocus 不是我的选择）。我在这里附上我的方法，你可以改变它（因为我的方法不管用，它无限期地将状态更改为真）
const [clicked,setClicked] = useState(false);
const categoryChangedHandler = (e) => {
setCategory(e);
};
{categories.map((category,index) => {
console.log("catogoried.map called and categories= " + category);
return <Button className="CategoryButton"
variant={clicked ? "contained" : "outlined"}
color="primary"
value={category}
onClick={() => {
categoryChangedHandler(category);
setClicked(true);
}}
style={{ textAlign: 'center' }}
>
{category}
</Button>
})
}
解决方法
如果您想根据其类别显示不同的颜色，您可能希望根据状态（是否已选中）更改变体。
示例
const categories = ['apple','banana','mango']
const App = () => {
const [ selected,setSelected ] = useState([])
const onClick = (value) => {
//this is a toggle to add/remove from selected array
if (selected.indexOf(value) > -1) {
//if exist,remove
setSelected( prev => prev.filter( item => item !== value )
} else {
//add to the selected array
setSelected( prev => [ ...prev,value ] )
}
}
return <div>
{categories.map((category,index) => {
return <Button className="CategoryButton"
/* if the category had been selected,show contained */
variant={ selected.indexOf(category) > -1 ? "contained" : "outlined"}
color="primary"
value={category}
onClick={() => {
onClick(category);
}}
style={{ textAlign: 'center' }}
>
{category}
</Button>
})
}</div>
}
上面的示例保留了一组选定的类别。当然，如果您只想允许在每次点击时选择 ONE，那么您可以使用 setSelected(value)（其中 value 是类别名称）代替数组，然后在您的按钮组件使用
variant={ selected === category ? 'contained' : 'outlined' }
记得改变你的使用状态，使用字符串代替数组
const [ selected,setSelected ] = useState('') //enter a category name if you want it to be selected by default