Блог

У меня есть этот компонент React. Который отображает простой HTML. У меня есть обработчик событий, прикрепленный к элементу. При нажатии на этот конкретный элемент я хочу, чтобы некоторые стили CSS изменились. Для этого я использовал приведенный ниже код-

 import React from 'react';
import './start.css';

class Start extends React.Component {
    handleEvent() {
        const login = document.querySelector('.login');
        const start = document.querySelector('.start')
        login.style.right = '0';
        start.style.left = '-100vw';
    }
    render() {
        return (
            <section className = 'page start'> 
               <h1>Welcome To Our App</h1>
               <button onClick = {this.handleEvent}>Next</button>
            </section>
        )
    }
}

export default Start;
  

Мой вопрос заключается в handleEvent() том, уместно ли выбирать элементы с помощью Document и стилизовать элементы с использованием .style . Есть ли какой-либо другой «специфичный для реакции» способ сделать это?

 class Test extends React.Component {
  constructor(){
         super();

         this.state = {
              black: true
         }
    }

    changeColor(){
        this.setState({black: !this.state.black})
    }

    render(){
        let btn_class = this.state.black ? "blackButton" : "whiteButton";

        return (
             <div>
                 <button className={btn_class}
                         onClick={this.changeColor.bind(this)}>
                           Button
                  </button>
             </div>
        )
    }
}

ReactDOM.render(<Test />, document.querySelector("#app"))  

 button{
  width: 80px;
  height: 40px;
  margin: 15px;
}
.blackButton{
  background-color: black;
  color: white;
}

.whiteButton{
  background-color: white;
  color: black;
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>  

прежде всего, да, вы можете использовать document в react для этого. Но «специфичный для реакции» стиль у вас будет примерно таким:

 <div id="app"></div> 
  

В файле css :

 button{
  width: 80px;
  height: 40px;
  margin: 15px;
}
.blackButton{
  background-color: black;
  color: white;
}

.whiteButton{
  background-color: white;
  color: black;
}
  

и, наконец, компонент :

 class Test extends React.Component {
  constructor(){
         super();

         this.state = {
              black: true
         }
    }

    changeColor(){
        this.setState({black: !this.state.black})
    }

    render(){
        let btn_class = this.state.black ? "blackButton" : "whiteButton";

        return (
             <div>
                 <button className={btn_class}
                         onClick={this.changeColor.bind(this)}>
                           Button
                  </button>
             </div>
        )
    }
}

ReactDOM.render(<Test />, document.querySelector("#app"))
  

Вы можете установить состояние, чтобы проверить, была ли нажата кнопка, и изменить имя класса

Можно использовать аналогичный подход.

Это специфичный для React способ!

Вы можете обратиться к React doc https://reactjs.org/docs/faq-styling.html

 
import React from 'react';
import './start.css';

class Start extends React.Component {

 constructor(props) {
    super(props);
    this.state = {hasButtonClicked : false};
  }
    handleEvent() {
 this.setState({hasButtonClicked : true});
    }
    render() {
        let clicked = this.state.hasButtonClicked;
        return (
            <section className = { clicked ? someCssClass :'page start'} > 
               <h1>Welcome To Our App</h1>
               <button onClick = {this.handleEvent}>Next</button>
            </section>
        )
    }
}