我点击数字可以自增，然后改变按钮的值变成不改变，点击不改变再变成改变

Question

我点击数字可以自增1，然后改变按钮的值变成不改变，此时数字无法自增，点击不改变按钮后，按钮的值再变成改变，此时值可以自增，不断如此，请问如何实现？

import React from 'react';

class Basic extends React.Component {

    constructor() {

        super();
        this.state = {
            changeValue: '', // 任务栏改变值
            isLocked: true,
            value: 2
        }
        this.changeHandle = this.changeHandle.bind(this);

        this.setValue = this.setValue.bind(this);

    }

    setValue() {
        this.setState({
            value: this.state.value + 1
        })
    }

    changeHandle(content, event){
        console.log('传递的内容 = ' + content)
        this.setState({
            isLocked: !this.state.isLocked
        })
    }
    
    componentWillMount() {

        console.log('组件将要渲染')

        this.setState({
            value: this.state.value + 1
        })
    }



    componentDidMount(){
        console.log('组件正式渲染')
    }

    render() {

        console.log('渲染render()')

        var divStyle = {

        }

        var valueStyle = {
            fontSize: 50,
            color: '#FF0004'
        }

        return (

            <div id style={divStyle} className='data-line'>
                <div>
                    <div style={valueStyle} onClick={this.setValue}>{this.state.value}</div>
                </div>
                <div>
                    {this.state.isLocked ?
                        <button onClick={this.changeHandle.bind(this, '人生不如意')}>改变</button> :
                        <button>无法点击按钮</button>
                    }
                </div>

            </div>
        )
    }
}

export default Basic;

Answer 1

Answer 2

import React from 'react';

class Basic extends React.Component {

  constructor() {

    super();
    this.state = {
      changeValue: '', // 任务栏改变值
      isLocked: false,
      value: 2
    }
    this.changeHandle = this.changeHandle.bind(this);

    this.setValue = this.setValue.bind(this);

  }

  setValue() {
    if (this.state.isLocked) {
      return
    }
    this.setState({
      value: this.state.value + 1,
      isLocked: true
    })
  }

  changeHandle(content, event) {
    console.log('传递的内容 = ' + content)
    this.setState({
      isLocked: !this.state.isLocked
    })
  }

  componentWillMount() {

    console.log('组件将要渲染')

    this.setState({
      value: this.state.value + 1
    })
  }



  componentDidMount() {
    console.log('组件正式渲染')
  }

  render() {

    console.log('渲染render()')

    var divStyle = {

    }

    var valueStyle = {
      fontSize: 50,
      color: '#FF0004'
    }

    return (

      <div id style={divStyle} className='data-line'>
        <div>
          <div style={valueStyle} onClick={this.setValue}>{this.state.value}</div>
        </div>
        <div>
          {this.state.isLocked ?
            <button onClick={this.changeHandle.bind(this, '人生不如意')}>不改变</button> :
            <button onClick={this.changeHandle.bind(this, '人生不如意')}>改变</button>
          }
        </div>

      </div>
    )
  }
}

export default Basic;