單擊按鈕時更改 Reactjs 中特定元素的顏色

Question

我希望能夠更改網頁上某些元素的顏色以使其更易於訪問。

class App extends Component {

  render() {
    return (
      <React.Fragment>
        <div>This is a button</div>
        <button>Click me!</button>
      </React.Fragment>
    );
  }
}

例如，如果我在 React 中有類似的東西，我如何在單擊按鈕時將 div 的背景顏色更改為紅色，將按鈕的背景更改為藍色？ 我曾嘗試使用 ref 但我不太自信，因此將不勝感激，謝謝。

Answer 1

  class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            divColor: "white",
            buttonColor: "white"
        };
    }



  handleButtonClick = () => {
    this.setState({
        divColor: "red",
        buttonColor: "blue"
    })
  }

  render() {
    return (
      <React.Fragment>
        <div style={{background: this.state.divColor}}>This is a button</div>
        <button 
            style={{background: this.state.buttonColor}}
            onClick={this.handleButtonClick}
        >
            Click me!
        </button>
      </React.Fragment>
    );
  }
}

新代碼：

• 將初始值為“white”的 divColor 和 buttonColor 添加到組件的 state。
• 創建一個 function 來更改 div 和按鈕背景的值。
• 將 jsx 元素的背景值設置為它們各自的 state 變量。 這樣，當這些變量更新時（即 state 更新時），樣式也會更新。
• 將我們自定義的 function 傳遞給按鈕的 onclick 事件。

Answer 2

簡單解釋：

handleChangeBackground() {
  this.setState({ bgColor: '#000' });
}

<div style={{ backgroundColor: this.state.bgColor }} className="articleParent">

  <div>Article Content Section</div>
  <colorButton handleBackground={this.handleChangeBackground} />

</div>

colorButton 組件內部：

render() {
  return <Button onClick={this.props.handleBackground}>Change Color</Button>
}

孩子正在改變背景，純粹是基於發射 function 的道具。

這可能是錯誤的，我在會議之間 XD 如果不是這樣，我希望它有所幫助！

Answer 3

您可以根據 state 值有條件地添加/刪除類。

    function App() {
      const [theme, setTheme] = useState('default');

      handleClick = () => {
        setTheme('red');
      }

      return (
        <React.Fragment>
          <div className={theme === 'red' ? 'red-background': 'default-background'}>This is a button</div>
          <button onClick={handleClick}>Click me!</button>
        </React.Fragment>
      );
   }

然后在您的 CSS 中，您將定義類

.red-background {
  background: red;
}

.default-background {
  background: white;
}

如果您的組件上有很多類，這是一個有用的 package 有條件地將 class 名稱連接在一起。 https://github.com/JedWatson/classnames