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

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 {&nbsp; constructor() {&nbsp; &nbsp; super();&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; changeValue: '', // 任务栏改变值&nbsp; &nbsp; &nbsp; isLocked: false,&nbsp; &nbsp; &nbsp; value: 2&nbsp; &nbsp; }&nbsp; &nbsp; this.changeHandle = this.changeHandle.bind(this);&nbsp; &nbsp; this.setValue = this.setValue.bind(this);&nbsp; }&nbsp; setValue() {&nbsp; &nbsp; if (this.state.isLocked) {&nbsp; &nbsp; &nbsp; return&nbsp; &nbsp; }&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; value: this.state.value + 1,&nbsp; &nbsp; &nbsp; isLocked: true&nbsp; &nbsp; })&nbsp; }&nbsp; changeHandle(content, event) {&nbsp; &nbsp; console.log('传递的内容 = ' + content)&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; isLocked: !this.state.isLocked&nbsp; &nbsp; })&nbsp; }&nbsp; componentWillMount() {&nbsp; &nbsp; console.log('组件将要渲染')&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; value: this.state.value + 1&nbsp; &nbsp; })&nbsp; }&nbsp; componentDidMount() {&nbsp; &nbsp; console.log('组件正式渲染')&nbsp; }&nbsp; render() {&nbsp; &nbsp; console.log('渲染render()')&nbsp; &nbsp; var divStyle = {&nbsp; &nbsp; }&nbsp; &nbsp; var valueStyle = {&nbsp; &nbsp; &nbsp; fontSize: 50,&nbsp; &nbsp; &nbsp; color: '#FF0004'&nbsp; &nbsp; }&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div id style={divStyle} className='data-line'>&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div style={valueStyle} onClick={this.setValue}>{this.state.value}</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.isLocked ?&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={this.changeHandle.bind(this, '人生不如意')}>不改变</button> :&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={this.changeHandle.bind(this, '人生不如意')}>改变</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )&nbsp; }}export default Basic;