React组件仅更新一次

Question

React的新手，发现它令人兴奋和压倒性。

我有以下代码。我正在尝试使用组件内的状态来增加字体大小，然后用一点文字来呈现对网页的更新。

constructor(props) {
		super(props);
		this.state = {
			maxSize: this.props.max,
			currentSize: this.props.size
};

iSizeClick() {
  this.setState({ currentSize: this.state.currentSize < this.state.maxSize ? this.state.currentSize++ : this.state.currentSize });
}

render() {
  var size = this.state.currentSize;
    	  	
  return(		
	  <div>
	    <span id="fontSizeSpan" hidden={this.state.hidden}>{size}</span>
	    <button id="increaseButton" hidden={this.state.hidden} onClick={this.iSizeClick.bind(this)}>+</button>
	    <span id="textSpan" onClick={this.handleClick.bind(this)} style={{fontWeight:bold, fontSize:size}}>{this.props.text}</span>
	  </div>
  );
}

我看不到是什么限制了我每次单击增量按钮都无法渲染组件的能力。

Answer 1

将prevState传递到setState

iSizeClick() {
    this.setState(prevState => ({
      currentSize:
        prevState.currentSize < prevState.maxSize
          ? prevState.currentSize + 1
          : prevState.currentSize
    }));
  }

这是我的代码沙箱https://codesandbox.io/s/j343ww1v03 干杯！

Answer 2

根据我的观察，请对您的代码进行以下更改：-fontWeight：大小+'px'。

谢谢