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

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;