Question

我需要将一些条件与React中的按钮相关联。这是代码：

class Stopwatch extends React.Component{
    constructor(props){
        super(props);
        this.clickstart=this.clickstart.bind(this);
        this.clickreset=this.clickreset.bind(this);
        this.clickstop=this.clickstop.bind(this);
        this.state={
          timer:0
        }

    }
    clickstart(){
         this.incrementer=setInterval( ()=>this.setState({
             timer:this.state.timer+1
         }),1000);
    }
    clickreset(){
        clearInterval(this.incrementer);// note what we did here 
        this.setState({
            timer:0
        })
    }
    clickstop(){
      clearInterval(this.incrementer);
    }

    render(){

        return(
            <div className="stopwatch">
            <h1>{convertfun(this.state.timer)}</h1>
            <button  onClick={this.clickstart}>Start</button>
            <button onClick={this.clickreset}>Reset</button>
            <button onClick={this.clickstop}>Stop</button>

            </div>
        );
    }
}

我希望启动按钮仅在timer读数为零或其值为零时才起作用。我如何在React中实现这一目标？

Answer 1

你可以这样做：

 return(
         <div className="stopwatch">
         <h1>{convertfun(this.state.timer)}</h1>
         {this.state.timer == 0 && <button  onClick={this.clickstart}>Start</button>}
         <button onClick={this.clickreset}>Reset</button>
         <button onClick={this.clickstop}>Stop</button>
         </div>
        );

或者

 render(){

       let button = null;
       if(this.state.timer == 0) button = <button onClick={this.clickstart}>Start</button>;

        return(
            <div className="stopwatch">
            <h1>{convertfun(this.state.timer)}</h1>
            {button}
            <button onClick={this.clickreset}>Reset</button>
            <button onClick={this.clickstop}>Stop</button>

            </div>
        );
    }

Answer 2

class Stopwatch extends React.Component{
    constructor(props){
        super(props);
        this.clickstart=this.clickstart.bind(this);
        this.clickreset=this.clickreset.bind(this);
        this.clickstop=this.clickstop.bind(this);
        this.state={
          timer:0
        }

    }

    clickstart() {
         this.incrementer=setInterval( ()=>this.setState({
             timer:this.state.timer+1
         }),1000);
    }

    clickreset() {
        clearInterval(this.incrementer);// note what we did here 
        this.setState({
            timer:0
        })
    }

    clickstop() {
      clearInterval(this.incrementer);
    }

    render() {

        return(
            <div className="stopwatch">
            <h1>{convertfun(this.state.timer)}</h1>
            // Change here
            {this.state.timer == 0 && <button  onClick={this.clickstart}>Start</button>}
            <button onClick={this.clickreset}>Reset</button>
            <button onClick={this.clickstop}>Stop</button>

            </div>
        );
    }
}

Answer 3

您可以将禁用属性添加到条件为

的按钮

<button disabled={this.state.timer === 0} onClick={this.clickstart}>Start</button>

将条件语句与reactjs中的按钮相关联

3 个答案: