Как переключить класс элемента div, нажав кнопку в react js?

Я хочу переключить имя класса одного элемента, щелкнув другой элемент. Оба элемента находятся в отдельных файлах компонентов. Я не знаю, как получить состояние элемента и передать его другому элементу. Пожалуйста, помогите мне решить проблему.

file1.js

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

file2.js

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

Я хочу переключить класс активный на обертка div при нажатии кнопки.

Спасибо

Не могли бы вы включить код, который вы написали до сих пор? Являются ли компоненты братьями и сестрами или являются родителями / дочерними элементами?

Tholle 10.08.2018 16:05

Компоненты родительский / дочерний

Samarth 10.08.2018 16:07

Итак, вы хотите переключить класс в родительском при нажатии кнопки в дочернем элементе?

Tholle 10.08.2018 16:09
codeandbox.io/s/m4py2y97zp
Sanjay A 10.08.2018 16:11

Кнопка находится в одном файле file.js, а div-оболочка - в другом файле file2.js. Итак, я хочу переключить класс на обертку div нажатием кнопки.

Samarth 10.08.2018 16:11

Да, но это важное различие, если вы хотите переключить класс в дочернем элементе, нажав кнопку в родительском элементе, или если вы хотите переключить класс в родительском элементе, нажав кнопку в дочернем элементе.

Tholle 10.08.2018 16:12

@SanjayA ваша функция переключения и применяемый элемент находятся в одном файле. Я хочу переключить класс из одного файла в другой.

Samarth 10.08.2018 16:13

@Tholle Я хочу изменить класс родительской оболочки, нажав кнопку в дочернем элементе.

Samarth 10.08.2018 16:15
codeandbox.io/s/m4py2y97zp -> Использование родительского / дочернего отношения
Sanjay A 10.08.2018 16:24

@SanjayA, ваш код сработал, спасибо

Samarth 10.08.2018 16:36
1
10
3 854
2

Ответы 2

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

Код работает в том же файле. Я хочу применить изменения из одного файла к другому. Моя кнопка находится в header.js, и я хочу применить изменения в файле base.js.

Samarth 10.08.2018 16:16
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

Пожалуйста, не удаляйте эту ссылку.

Samarth 10.08.2018 16:37

Здравствуйте, а можно вместо кнопки переключения добавить обычную кнопку?

Samarth 14.08.2018 09:15

Изменение <ToogleButton onClick = {this.togglebutton} value = {this.state.active} /> на <button onClick = {this.togglebutton} value = {this.state.active}> Click Me </button> Должно сработать

Sanjay A 14.08.2018 09:20

Я получаю сообщение об ошибке «Неожиданный токен» (16:18) 14 | } 15 | > 16 | updateValue = value => {| ^ 17 | this.setState ({18 | активно: значение 19 |}); ошибки @ client: 167 onmessage @ socket.js: 41 EventTarget.dispatchEvent @ sockjs.js: 170 (анонимно) @ sockjs.js: 883 SockJS._transportMessage @ sockjs.js: 881 EventEmitter.emit @ sockjs.js: 86 WebSocketTransport. ws.onmessage @ sockjs.js: 2957

Samarth 14.08.2018 09:50

не могли бы вы помочь мне

Samarth 14.08.2018 10:07

Css не загружен, вы хотите выделить панель поиска при нажатии ... codeandbox.io/s/m51o0yvo3y

Sanjay A 14.08.2018 10:24

Другие вопросы по теме