REACT - 切换课程onclick

Question

我试图弄清楚如何切换活动类onClick来更改CSS属性.

我采取了很多方法,并阅读了许多SO答案.使用jquery它会相对简单,但是,我无法通过反应来解决这个问题.我的代码如下.任何人都可以建议我该怎么做？

如果不为每个项目创建新组件,是否可以执行此操作？

class Test extends Component(){

    constructor(props) {

    super(props);
    this.addActiveClass= this.addActiveClass.bind(this);

  }

  addActiveClass() {

    //not sure what to do here

  }

    render() {
    <div>
      <div onClick={this.addActiveClass}>
        <p>1</p>
      </div>
      <div onClick={this.addActiveClass}>
        <p>2</p>
      </div>
        <div onClick={this.addActiveClass}>
        <p>3</p>
      </div>
    </div>
  }

}

Answer 1

使用状态.Reacts docs就在这里.

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.addActiveClass= this.addActiveClass.bind(this);
        this.state = {
            active: false,
        };
    }
    toggleClass() {
        const currentState = this.state.active;
        this.setState({ active: !currentState });
    };

    render() {
        return (
            <div 
                className={this.state.active ? 'your_className': null} 
                onClick={this.toggleClass} 
            >
                <p>{this.props.text}</p>
            </div>
        )
  }
}

class Test extends Component {
    render() {
        return (
            <div>
                <MyComponent text={'1'} />
                <MyComponent text={'2'} />
            </div>
        );
    }
}

Answer 2

你也可以用hooks来做到这一点。

function MyComponent (props) {
  const [isActive, setActive] = useState(false);

  const toggleClass = () => {
    setActive(!isActive);
  };

  return (
    <div 
      className={isActive ? 'your_className': null} 
      onClick={toggleClass} 
    >
      <p>{props.text}</p>
    </div>
   );
}  

Answer 3

我宁愿在内联if语句上使用“ &&” -operator。在我看来，它以这种方式提供了更简洁的代码库。

通常你可能会做这样的事情

render(){
return(
  <div>
    <button className={this.state.active && 'active'}
      onClick={ () => this.setState({active: !this.state.active}) }>Click me</button>
  </div>
)
}

请记住，箭头功能是ES6的功能，请记住在类构造函数（）中设置“ this.state.active”值{}

this.state = { active: false }

或者，如果您想在JSX中注入CSS，则可以通过这种方式进行

<button style={this.state.active && style.button} >button</button>

你可以声明样式json变量

const style = { button: { background:'red' } }

记得在JSX样式表上使用camelCase。

Answer 4

好吧,你的addActiveClass需要知道被点击的内容.像这样的东西可以工作(注意我已经添加了div作为状态数组活动的信息,并且onClick现在传递被点击作为参数的信息,之后状态相应地被更新 - 当然有更聪明的方法做到这一点,但你明白了.

class Test extends Component(){

  constructor(props) {
    super(props);
    this.state = {activeClasses: [false, false, false]};
    this.addActiveClass= this.addActiveClass.bind(this);
  }

  addActiveClass(index) {
    const activeClasses = [...this.state.activeClasses.slice(0, index), !this.state.activeClasses[index], this.state.activeClasses.slice(index + 1)];
    this.setState({activeClasses});
  }

  render() {
    const activeClasses = this.activeClasses.slice();
    return (
      <div>
        <div className={activeClasses[0]? "active" : "inactive"} onClick={() => this.addActiveClass(0)}>
          <p>0</p>
        </div>
        <div className={activeClasses[1]? "active" : "inactive"} onClick={() => this.addActiveClass(1)}>
          <p>1</p>
        </div>
          <div  onClick={() => this.addActiveClass(2)}>
          <p>2</p>
        </div>
      </div>
    );
  }
}

Answer 5

您可以简单地使用 event.target 访问接收单击事件的元素 classList，然后使用 classList 对象上的切换方法来添加或删除预期的类

<div onClick={({target}) => target.classList.toggle('active')}>
  ....
  ....
  ....
</div>

等价物

<div onClick={e=> e.target.classList.toggle('active')}>
  ....
  ....
  ....
</div>

或者通过声明一个处理点击并执行额外工作的函数

function handleClick(el){
    .... Do more stuff
    el.classList.toggle('active');

}
<div onClick={({target})=> handleClick(target)}>
  ....
  ....
  ....
</div>

Answer 6

React 有组件状态的概念，所以如果你想切换它，请执行以下操作setState：

constructor(props) {
  super(props);

  this.addActiveClass= this.addActiveClass.bind(this);
  this.state = {
    isActive: false
  }
}

addActiveClass() {
  this.setState({
    isActive: true
  })
}

在您的组件中使用this.state.isActive来渲染您需要的内容。

当您想要在组件#1 中设置状态并在组件#2 中使用它时，这会变得更加复杂。只需深入研究 React 单向数据流和可能的 redux 即可帮助您处理它。

Answer 7

使用 React 你可以将切换类添加到任何 id/元素，尝试

样式.css

.hide-text{
    display: none !important;
    /* transition: 2s all ease-in 0.9s; */
  }
.left-menu-main-link{
    transition: all ease-in 0.4s;
}
.leftbar-open{
    width: 240px;
    min-width: 240px;
    /* transition: all ease-in 0.4s; */
}
.leftbar-close{
    width: 88px;
    min-width:88px;
    transition: all ease-in 0.4s;
}

文件名.js

......
    ToggleMenu=()=>{
             this.setState({
                isActive: !this.state.isActive
              })
              console.log(this.state.isActive)
        }
        render() {
            return (
                <div className={this.state.isActive===true ? "left-panel leftbar-open" : "left-panel leftbar-close"} id="leftPanel">
                    <div className="top-logo-container"  onClick={this.ToggleMenu}>
                            <span className={this.state.isActive===true ? "left-menu-main-link hide-from-menu" : "hide-text"}>Welcome!</span>
                    </div>

                    <div className="welcome-member">
                        <span className={this.state.isActive===true ? "left-menu-main-link hide-from-menu" : "hide-text"}>Welcome<br/>SDO Rizwan</span>
                    </div>
    )
    }
......