代码之家 › 专栏 › 技术社区 › Somename

禁用div onClick

reactjs javascript

Somename · 技术社区 · 5 年前

我有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 功能?

谢谢。

1 回复 | 直到 5 年前

Asaf Aviv 5 年前

您可以添加 locked 给你的 state 如果你想锁定另一个 divs 从你的函数返回如果 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>
    );
  }
}

German 5 年前

这是我做的另一个方法,我希望它有意义和帮助。如果你有任何问题请告诉我

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

Andrew 5 年前

虽然这更像是一个语义参数,但您仍然在每个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>
  )
}