我只想在 reactjs 中更改单击按钮（onClick）的变体或背景。我怎样才能实现它？

Posted 2023-04-19

【中文标题】我只想在 reactjs 中更改单击按钮（onClick）的变体或背景。我怎样才能实现它？

【英文标题】：I want to change variant or background of the clicked button (onClick) only in reactjs. How can i achieve it?

【发布时间】：2021-07-06 13:51:45

【问题描述】：

我想要做的是，当单击按钮时，在 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>
                )

【问题讨论】：

你想要的是this吗？顺便说一句，您在问题中的代码应该可以在不更改任何内容的情况下工作。

onClick=() => categoryChangedHandler(category); setClicked(true) 首先你应该这样写，其次你想达到什么目的？

No @NearHuscarl，我在这里提到的代码是为每个被映射的按钮设置 setClicked(true) （从列表中映射的按钮超过 10 个）。我想更改我点击的按钮的变体/背景颜色（onClick），因为其余按钮的点击状态应该是假的，不应该对它们进行任何更改。

【参考方案1】：

如果你想根据它的类别显示不同的颜色，你可能想根据状态更改变体（无论它是否被选中）。

例子

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