更改激活時 material-ui 按鈕的顏色

Question

我正在嘗試更改 material-ui 按鈕單擊時的顏色。 我有多個按鈕。 當我點擊一個按鈕時，它們的顏色會同時改變。 我怎樣才能只更改被點擊的那個。 我有以下代碼，但它沒有做這項工作，它應該做。

   constructor(props){
      super(props);
      this.state={
      videos : data,
      filtered: data,
      color : "primary"
    };
   }

   handleClick = (event) => {
    const value = event.currentTarget.value;
    console.log(event);
    this.setState({
      filtered: this.state.videos.filter(item => { 
          return item.category === value
      }),
      color: "secondary"
    });
  }

  <Button value="java" onClick={this.handleClick} variant="contained" 
   color={this.state.color} >java</Button> 
  <Button value="React" onClick={this.handleClick} 
   variant="contained" color={this.state.color}>React</Button> 
  <Button value="C#" onClick={this.handleClick}  
   variant="contained" color={this.state.color}>C#</Button> 

Answer 1

看起來這個 state 更改不在傳遞給setState()的 object 中，它應該是：

this.setState({
    filtered: this.state.videos.filter(item => { 
        return item.category === value
    }),
    Color: "secondary"
});

Answer 2

    handleClick = (event) => {
        const value = event.currentTarget.value;
        this.setState({ filtered: this.state.videos.filter(item => { 
                return item.category === value
            }), {Color: "secondary"}
        })
   }

您剛剛在過濾器的回調 function 中插入了顏色，只需更改它即可

Answer 3

請檢查這個例子：

import React, {useState} from 'react';
import {makeStyles} from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

export default function ContainedButtons() {
    const [color, setColor] = useState('primary');

    return (
        <div>
            <Button variant="contained" color={color} onClick={() => {setColor('secondary')}}>
                Click Me
            </Button>
        </div>
    );
}