2

我正在尝试做的是，当单击按钮时，在 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>
                })
}
4

1 回答 1

2

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

例子

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>
}

上面的示例保持选择的类别数组。当然，如果您只想在每次单击时选择一个，那么您可以使用而不是数组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
于 2021-04-11T07:41:12.363 回答