javascript - 禁用 div onClick

Question

我有 4 个 div，onClick 调用一个函数。单击特定的 div 时，我希望其他 div 不可单击。但在单击特定的 div 之前，我希望它们是可单击的。我的代码:

import React, { Component } from 'react';

class MyApp extends Component {
    state = {
        div:2
    }

    handleClick = (id) => {
        id==this.state.div? 
        //disable onClick for all divs :
        //do nothing
    }

    render() {
      return (
        <div>
            <div onClick={()=>this.handleClick(1)}>
                1
            </div>
            <div onClick={()=>this.handleClick(2)}>
                2
            </div>
            <div onClick={()=>this.handleClick(3)}>
                3
            </div>
            <div onClick={()=>this.handleClick(4)}>
                4
            </div>
        </div>
        );
    }
}


export default MyApp

我该怎么做？我禁用 handleClick 函数的点击是否正确？

谢谢。

Answer 1

这是我采用的另一种方法，我希望它有意义并有所帮助。如果您有任何问题，请告诉我

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      buttonClick: 2,
      buttons: [1,2,3,4],
      clicked: false
    }
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(id){
    console.log('clicked ', id)
    this.setState({
      buttonClick: id,
      clicked: true
    })
  }

  renderInitButtons() {
     const {buttons} = this.state;
    return buttons.map(button => {
      return <div onClick={() => this.handleClick(button)}> {button} </div>
    })
  }
  renderButtonClicked() {
    const {buttons, buttonClick} = this.state;
    return buttons.map(button => {
      if(buttonClick === button) {
        return <div onClick={() => this.handleClick(button)}> {button} </div>
      }
      return <div > {button} </div>
    })
  }

  render() {
    const {buttons, buttonClick, clicked} = this.state;
    return (
    <div> 
    {
      clicked? this.renderButtonClicked(): this.renderInitButtons()
    }
    </div>
    )
  }
}
render(<App />, document.getElementById('root'));