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

【问题标题】：I want to change variant or background of the clicked button (onClick) only in reactjs. How can i achieve it?我只想在 reactjs 中更改单击按钮（onClick）的变体或背景。我怎样才能实现它？
【发布时间】：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），因为其余按钮的点击状态应该是假的，不应该对它们进行任何更改。

标签： javascript reactjs react-hooks material-ui materialbutton

【解决方案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

【讨论】：