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

Question

我正在尝试做的是，当单击按钮时，在 onclick 时它的变体（material 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>
                })
}

Answer 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)（其中值是类别名称）而不是数组，然后在你的按钮组件中使用

variant={ selected === category ? 'contained' : 'outlined' }

记得将您的使用状态更改为使用字符串而不是数组

const [ selected, setSelected ] = useState('') //enter a category name if you want it to be selected by default

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

I want to change variant or background of the clicked button (onClick) only in reactjs. How can i achieve it?

javascript

reactjs

react-hooks

material-ui

materialbutton