如何在React上的onClick按鈕上更改樣式屬性？

Question

當我點擊一個按鈕時，我有一個想要隱藏的反應元素。

元素樣式在構造函數中加載，如下所示：

 constructor(props) {
super(props);
this.state = {
  display: 'block'
};
this.ElementStyle= {
  width: '100%',
  backgroundColor: '#F6F6F6',
  color: '#404040',
  padding: '8px 15px',
  boxSizing: 'content-box',
  position: 'fixed',
  bottom: '0',
  display: this.state.display
    }
  }

元素里面有一個按鈕，它的render（）調用一個改變狀態的函數：

render()  {
  <button onClick={this.Method.bind(this)}>Click me </button>
}

而Method（）：

  Method() {
    this.setState({
      display: 'none'
    });
  }

然后我有這個：

  shouldComponentUpdate() {
    this.ElementStyle.display = this.state.display;
  }

然而，這說： "TypeError: "display" is read-only"

Answer 1

只需將您的樣式置於狀態：

州

this.state = {
  ElementStyle: {
  width: '100%',
  backgroundColor: '#F6F6F6',
  color: '#404040',
  padding: '8px 15px',
  boxSizing: 'content-box',
  position: 'fixed',
  bottom: '0',
  display: 'block
};

方法

 Method() {
    this.setState({
      ElementStyle: {
      ...this.state.ElementStyle,
      display: 'none'
      }
    });
  }

給予

render()  {
  <button style={this.state.ElementStyle} onClick={this.Method.bind(this)}>Click me </button>
}

Answer 2

沒有做錯的反應有一個虛擬的dom，並且它是自動管理的，但是你試圖改變它的行為，我想你可以這樣做：

constructor(props) {
    super(props);
    this.state = {
       display: 'block'
    };
}


Method() {
   this.setState({
       display: 'none'
   });
}


render()  {
  <div>
     <div style={{display: this.state.display}} ></div>
     <button onClick={this.Method.bind(this)}>Click me </button>
  </div>
}

你也有幾個選擇，但這是最簡單的方法。

Answer 3

我要做的是為您的組件設置樣式並將顯示初始化設置為none，例如：

// css
.yoourclass {
 width: '100%',
  backgroundColor: '#F6F6F6',
  color: '#404040',
  padding: '8px 15px',
  boxSizing: 'content-box',
  position: 'fixed',
  bottom: '0',
  display: none
    }

}

//have a class that show display to block
.show {
  display: block;
}

然后在你的JavaScript中

// set your state to some display property 
this.state = {
   showHiddenElement: false
}

//then you can set state to display css like
const {showHiddenElement} = this.state;
this.setState({
  showHiddenElement: !showHiddenElement
})
// and in your component 
// apply the class bases on the state like
const toggle = this.state.showHiddenElement;
<yourelement className={`yoourclass ${toggle? 'show' : ''}`}

這樣的事情，我希望這是有道理的，讓我知道。 這是一種不同的方法。

Answer 4

我不確定你為什么要嘗試使用style屬性設置樣式，但我們通常如何使用css類和css樣式表。 在運行時，我們修改類而不是元素樣式。

所以，對於你的情況，我們會把這種風格作為一些類，比如說，讓我們說App.scss

.class-to-be-applied {
    width: 100%;
    background-color: #F6F6F6;
    color: #404040;
    padding: 8px 15px;
    box-sizing: content-box;
    position: fixed;
    bottom: 0;

    .no-display {
        display: none;
    }
}

在App.js ，

import React, { Component }  from 'react';
import classnames from 'classnames';
import './App.scss';

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            display: true
        };
    }
    handleButtonClick = () => {
        this.setState(({ display }) => ({display: !display}));
    }
    render()  {
        return (
            <div>
                <button onClick={this.handleButtonClick}>Click me </button>
                <SomeComponent className={classnames('class-to-be-applied', {'no-display': !this.state.display})} />
            </div>
        );
    }
}

其他方式做同樣的事情和更優選的方法是不要渲染它以避免插入樹本身，如下面的App.js ，

import React, { Component }  from 'react';
import classnames from 'classnames';
import './App.scss';

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            display: true
        };
    }
    handleButtonClick = () => {
        this.setState(({ display }) => ({display: !display}));
    }

    render()  {
        return (
            <div>
                <button onClick={this.handleButtonClick}>Click me </button>
                { this.state.display && <SomeComponent className=class-to-be-applied' /> }
            </div>
        );
    }
}

Answer 5

1）將您的對象放入內聯CSS： -

render() {
    return (
        <div>
            <button onClick={ this.Method.bind(this) }>Click me </button>
            <h1 style={{
                 width: '100%',
                 backgroundColor: '#F6F6F6',
                 color: '#404040',
                 padding: '8px 15px',
                 boxSizing: 'content-box',
                 position: 'fixed',
                 bottom: '0',
                 display:this.state.display
            }}>About</h1>
        </div>
    )
}

2）並刪除這個shouldComponentUpdate（）函數

 shouldComponentUpdate() {
this.ElementStyle.display = this.state.display;
}