javascript - React JS 如何更改除单击按钮 onClick 之外的元素中的字体颜色？

Question

所以我设法使用按钮中的 setState() 更改按钮的背景颜色。但是，我尝试使用该按钮来更改同一组件内列表元素的字体颜色。

使用 setState() 只能让我更改正在单击的元素。我尝试过 querySelecting 其他元素的类，但使用 left.setState() 不是有效的函数。

如何使用按钮的 onClick 函数更改元素的 CSS 属性？

import React, { Component } from 'react';
import firebase from 'firebase';
import { firebaseConfig } from './connection';

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
let messageRef = firebase.database().ref('messages');

class LandingPage extends Component {

  constructor(props) {
    super(props);

    this.state = {
      name: '',
      message: '',
      list: [],
      font: "black",
      color: "blue"
    }
  }

//   onChange = () => {
//     if (this.state.color == 'blue'){
//       this.setState({ color: 'green' });
//     }
//     else {
//       this.setState({ color: 'blue' });
//     }
//  }

 onChange = () => {
  var left = document.querySelectorAll(".left");
  if (this.state.color === 'black'){
    this.setState({ color: 'grey' });
  }
  else {
    this.setState({ color: 'black' });
  }
}

  render() {
    return <div className='container'>

      {/* title */}
      <div className='titleDiv'>
        <h1>React Message App</h1>
      </div>

      {/* messages will be listed here */}
      <div className='messagesDiv' id='messagesDivId'>
        <ul>
          {/* List array is mapped through*/}
          {this.state.list.map(item => {
            return (
              <li className={(item.name === this.state.name ? 'right' : 'left')}
              style={{ color: this.state.font }}
                key={item.id}
                id={item.id}>
                {item.name}: {item.message}
              </li>
            )
          })}
        </ul>
      </div>

      {/*think, delete options*/}

      <button className='button think' style={{ backgroundColor: this.state.color }} onClick={this.onChange}>Think...</button>

      <button className='button delete'>Delete last message</button>
    </div>
  }
}

export default LandingPage;

这是“思考”按钮，单击该按钮可以更改具有“左”或“右”类名称的列表元素。请指教...

Answer 1

你弄乱了一些变量名称并误解了 React 的工作原理。

首先，无法查询HTML元素并执行setState因为这是一个 React 函数。无法从 HTML 文档中访问此函数。

其次，通过单击按钮更改状态变量并将该变量映射到列表元素的颜色的第一种方法是正确的，但您混淆了名称:

这是你的onChangeMethod :

onChange = () => {
    if (this.state.color == 'blue'){
        this.setState({ color: 'green' });
    }
    else {
        this.setState({ color: 'blue' });
    }
}

在这里，您将状态变量映射到颜色属性:

<li className={(item.name === this.state.name ? 'right' : 'left')}
    style={{ color: this.state.font }}
    key={item.id}
    id={item.id}>
    {item.name}: {item.message}
</li>

您正在设置state.color在 onChange函数，但您正在引用 state.font在您的列表元素中，改为更改 style到以下内容:

style={{ color: this.state.color }}