Question

我有4个onClick调用函数的div。单击特定的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

虽然这更多是一个语义参数，但无论状态如何，您仍将在每个div中触发一个事件。您只是在决定是否应采取任何措施。如果要使其真正没有任何行为，则必须动态添加/删除它们。最简单的方法是迭代并创建4个div，并附带条件确定是否应添加onClick侦听器

buildDivs() {
  return [1,2,3,4].map(id => {
    const divProps = {}
    if (this.state.div === id) {
      divProps.onClick = () => this.handleClick(id)
    }
    return <div {...divProps} key={id}>{id}</div>
  }
}
render() {
  return (
    <div>
      {this.buildDivs}
    </div>
  )
}

Answer 2

这是我采取的另一种方法，我希望它是有道理的并且对您有所帮助。让我知道您是否有任何疑问

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'));

Answer 3

您可以将locked添加到state中，并在您想锁定其他divs并从函数返回时返回true

并将其设置为true。

我还将更改handleClick函数以返回一个新函数，以使代码更具可读性

class MyApp extends Component {
  state = {
    div: 2,
    locked: false
  };

  handleClick = id => () => {
    if (this.state.locked) return;

    if (id === this.state.div) {
      this.setState({ locked: true });
    }
  };

  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>
    );
  }
}

如果您不想注册任何处理程序，还可以检查this.state.locked是否为真，并将null返回到onClick函数

class MyApp extends Component {
  state = {
    div: 2,
    locked: false
  };

  handleClick = id => {
    if (this.state.locked) return null;

    return () => {
      if (id === this.state.div) {
        this.setState({ locked: true });
      }
    }
  };

  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>
    );
  }
}

禁用div onClick

3 个答案: