javascript - 如何在 React 中更改按钮 onClick 的样式属性？

Question

我有一个 react 元素，当我点击一个按钮时我想隐藏它。

元素样式在构造函数中加载如下:

 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() {
    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>
}