React JS 如何更改点击按钮 onClick 以外的元素中的字体颜色？

Question

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

使用 setState() 只能让我更改我正在单击的元素。我试过查询选择其他元素的 class，但使用 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;

应该单击 'think' 按钮以更改具有 'left' 或 'right' class 名称的列表元素。请指教...

Answer 1

您需要绑定到 onChange 方法。您可以在构造方法中这样做：

constructor(props) {
super(props);

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

this.onChange = this.onChange.bind(this)
}

Answer 2

你弄乱了一些变量名并且误解了 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>

您在 onChange 函数中设置了 state.color，但您在列表元素中引用了 state.font，而是将 style 更改为以下内容：

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

Answer 3

import React, { Component } from "react";

class LandingPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      list: [
        {
          id: "1",
          message: "Hello World 1"
        },
        {
          id: "2",
          message: "Hello World 2"
        },
        {
          id: "3",
          message: "Hello World 3"
        }
      ],
      color: "red"
    };
    this.onChange = this.onChange.bind(this);
  }

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

  render() {
    return (
      <div className="container">
        <div className="titleDiv">
          <h1>React Message App</h1>
        </div>

        <div className="messagesDiv" id="messagesDivId">
          <ul>
            {this.state.list.map(item => {
              return (
                <li
                  style={{ color: this.state.color }}
                  key={item.id}
                  id={item.id}
                >
                  {item.message}
                </li>
              );
            })}
          </ul>
        </div>

        <button className="button think" onClick={this.onChange}>
          Change Color
        </button>
      </div>
    );
  }
}

export default LandingPage;

看看这是不是你想要的？

Answer 4

如果您想尝试内联..

<button className='button think' style={{ backgroundColor: this.state.color }} onClick={()=>{this.state.this.state.color == 'blue'?this.setState({ color: 'green' }):this.setState({ color: 'blue' })}}>Think...</button>

React JS 如何更改点击按钮 onClick 以外的元素中的字体颜色？

React JS How to change font color in element other than clicked button onClick?

javascript

onclick

setstate

reactjs