Question

我想通过单击另一个元素来切换一个元素的类名称。这两个元素都在单独的组件文件中。我不知道如何获取元素的状态并将其传递给另一个元素。请帮助我解决问题。

file1.js

<Button onClick={this.toggleFunction}>Button</Button>

file2.js

<div class="wrapper"></div>

点击按钮后，我想在包装器上切换活动类别。

谢谢

Answer 1

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

Answer 2

Parent Component 
        import React from "react";
        import ButtonComponent from "./buttonComponent";
        import "./demo.css";

        //Parent  Component
        class Demo extends React.Component {
          constructor(props) {
            super(props);
            this.state = {
              active: false
            };
          }

          updateValue = value => {
            this.setState({
              active: value
            });
          };
          render() {
            return (
              <div>
                <ButtonComponent updateParent={this.updateValue} />
                <div
                  className={
                    this.state.active ? "dropdownbutton1" : "dropdownbutton1Active"
                  }
                >
                  <label>First</label>
                  <br />
                  <select>
                    <option value="yes">yes</option>
                    <option value="no">no</option>
                  </select>
                </div>
              </div>
            );
          }
        }

        export default Demo;
Child Component 

        import React from "react";
        import ToggleButton from "react-toggle-button";
        import "./demo.css";

        class ButtonComponent extends React.Component {
          constructor(props) {
            super(props);
            this.state = {
              active: false,
              defaultValue: 1
            };
          }

          togglebutton = () => {
            this.props.updateParent(this.state.active);
            this.setState({ active: !this.state.active });
            if (this.state.active) {
              this.setState({ defaultValue: 1 });
            } else {
              this.setState({ defaultValue: -1 });
            }
          };
          render() {
            return (
              <div>
                <div className="ToggleButton">
                  <ToggleButton onClick={this.togglebutton} value={this.state.active} />
                </div>
              </div>
            );
          }
        }

        export default ButtonComponent;

链接：https://codesandbox.io/s/m4py2y97zp

如何通过在React JS中单击按钮来切换div元素的类？

2 个答案: