React:以编程方式添加/删除 CSS 类

这篇简洁实用的文章向您展示了如何以编程方式在 React 中的元素中添加/删除 CSS 类。我们可以在不安装任何第三方库的情况下完成工作。

概述

您可以使用事件处理函数或使用useRef挂钩向元素添加/删除单个或多个类。

使用事件处理函数:

// define the event handler function
const buttonClickHandler = (e) => {
    e.currentTarget.classList.remove('light');
    e.currentTarget.classList.add('dark');
};

// set onClick or other event props on your element
<button onClick={buttonClickHandler}>I AM A BUTTON</button>

使用useRef() 钩子:

/* Fefine a ref */
const kindaCodeRef = useRef();

/* Tie the ref with a certain element */
<div ref={kindaCodeRef}></div>

/* Add and Remove many classes at once */
kindaCodeRef.current.classList.remove('class-1', 'class-2', 'class-3');
kindaCodeRef.current.classList.add('class-4', 'class-5', 'class-6');

您还可以像这样切换类名:

kindaCodeRef.current.classList.toggle('dark-backgorund');
kindaCodeRef.current.classList.toggle('light-background');

为了更清楚,请参阅下面的完整工作示例。

例子

应用预览

我们将要构建的小型 React 项目提供了一个文本输入和一个包含消息的框。如果输入到文本输入中的名称长度等于或大于 3 个字符,则该名称被认为是有效的。框的颜色可以是以下之一:

  • 灰色:如果输入为空
  • 红色:如果提供的名称为 1 到 3 个字符
  • 蓝色:如果输入的名称有效

我们的 React 应用程序的另一个组件是一个可以在单击时更改其背景颜色的按钮。

这是演示:

React:以编程方式添加/删除 CSS 类

代码:

  1. 通过执行以下命令初始化一个新的 React 项目:
npx create-react-app kindacode-example

到目前为止,我们将关注这两个文件:src/App.jssrc/App.css。其他文件将完好无损。

2. 将src/App.js中的所有默认代码替换为以下内容(您可以在评论中看到解释):

// KindaCode.com
// src/App.js
import { useRef, useState } from 'react';
import './App.css';

function App() {
  const messageRef = useRef();

  const [message, setMessage] = useState(
    'If your name is less than 3 characters, it will be rejected.'
  );

  // this function will be triggered when the input changes
  const inputChangeHandler = (e) => {
    const enteredText = e.target.value;

    // In the beginning or when the user deletes everything, use the default style
    if (enteredText.length === 0) {
      setMessage(
        'If your name is less than 3 characters, it will be rejected.'
      );
      messageRef.current.classList.remove('message--error', 'message--success');
      messageRef.current.classList.add('message--default');
    } else if (enteredText.length < 3) {
      setMessage('Your name is too short.');
      messageRef.current.classList.remove(
        'message--default',
        'message--success'
      );
      messageRef.current.classList.add('message--error');
    } else {
      setMessage('Your name is valid.');
      messageRef.current.classList.remove('message--default', 'message--error');
      messageRef.current.classList.add('message--success');
    }
  };

  // this function is called when the button gets clicked
  const buttonClickHandler = (e) => {
    e.currentTarget.classList.toggle('button--dark');
    e.currentTarget.classList.toggle('button--light');
  };

  return (
    <>
      <div className='container'>
        <div>
          <h2>Welcome to KindaCode.com</h2>
          <input
            type='text'
            onChange={inputChangeHandler}
            placeholder='Enter your name'
            className='input'
          />
        </div>
        <div ref={messageRef} className='message message--default'>
          {message}
        </div>

        <button onClick={buttonClickHandler} className='button button--light'>
          Toggle My Color
        </button>
      </div>
    </>
  );
}

export default App;
  1. 清空src/App.css文件,然后添加以下内容:
.container {
  width: 80%;
  margin: 50px auto;
}

/* classes related to the text input and the message */
.input {
  width: 300px;
  padding: 10px 10px;
  border: 1px solid #bbb;
  border-radius: 5px;
}

.message {
  margin-top: 20px;
  padding: 20px;
  border-radius: 5px;
}

.message--default {
  background-color: #f1f1f1;
  color: #333;
}

.message--error {
  background: #e53935;
  color: white;
}

.message--success {
  background: #1565c0;
  color: white;
}

/* classes related to the button */
.button {
  margin-top: 50px;
  padding: 12px 30px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.button--light {
  background: #eee;
  color: #666;
}

.button--dark {
  background: #666;
  color: #fff;
}
  1. 启动它并转到 http://localhost:3000 以查看结果。

结论

你已经学会了在 React 中添加和删除 CSS 类而不使用任何第三方包的技术。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » React:以编程方式添加/删除 CSS 类