在react框架中使用文档合适吗？

Question

我有这个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设置元素样式是否合适。有没有其他“特定于反应”的方法来做到这一点？

Answer 1

​

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>

​

首先，是的，你可以在react中使用document。但是"react specific“风格是这样的：

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

Answer 2

您可以设置一个状态，以检查是否已单击该按钮并更改类名称

可以使用类似的方法。

这是React特定的方式！

你可以参考React文档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>
        )
    }
}