Reactjs 使用事件处理程序更改按钮外观

我想构建我的功能组件BoldButton，当用户单击小写字母a或大写字母a时，按钮的文本将更改为bold。下面是我正在进行的工作

import React, { useEffect, useState } from 'react';

const BoldButon = () => {

    const [color, setColor] = useState("black")

    useEffect(() => {
        
    })


    const changeColor = () => {
        setColor("black")
    }

    return (
        <div>
            <button  text={{style:color}} onClick={changeColor}>
                A   
            </button>
            <button text={{style:color}} onClick={changeColor}>
                a
            </button>
        </div>
    )
} 

export default BoldButon;

import React，{useffect，useState}来自“React”；
常量BoldButon=（）=>{
const[color，setColor]=useState（“黑色”）
useffect（（）=>{
})
常量changeColor=（）=>{
setColor（“黑色”）
}
返回(
A.
A.
)
} 
导出默认的BoldButon；

---

这是我在进行模拟技术面试时遇到的一个问题，所以我想知道在使用功能组件时如何解决这个问题**不确定是否需要利用useEffect来解决此问题。

目前，需要解决的语法问题有：

text={{style:color}}不确定这应该做什么：text不是您在按钮组件的任何位置设置的标准或自定义道具。另外，假设您要更改按钮文本的颜色（您可以使用style={{color}}}），那么您可以将其从黑色更改为灰色或黑色更改为黄色以获得不同的强调，但是您似乎说您需要不同的字体权重（粗体与非粗体）由CSS属性字体权重控制（这可以在HTML或JSX中通过所有元素都可以拥有的style属性进行设置

如果您没有任何useEffect，您可能可以/应该删除它。useEffect非常有用，因为如果某些内容的状态发生变化，并且您需要一个副作用，您可以将其放在那里（或者它可以用作奇怪的组件，它将仅在所有家长运行useEffect后运行）

对于这种情况，最好使用一个类，然后您可以使用一个字符串设置许多样式属性：like is emphasis是一个常用的类，它可以将字体权重更改为600，颜色从深灰色更改为黑色（如果需要）

您可能希望每个按钮都有单独的状态（因为您希望每个按钮在单击时都是粗体的：它似乎基于您的问题）

但如果不是最简单、最快的方法，那就是：

    <button 
      style={{fontWeight: bold ? 'bold' : 'normal'}}
      onClick={changeWeight}
    >
     A   
    </button>
    <button
      style={{fontWeight: !bold ? 'bold' : 'normal'}}
      onClick={changeWeight}
    >
      a
    </button>

---

您不需要

useffect

对于这种功能，您可以使用

useState

钩子来管理变量，该变量确定用户是否单击了按钮。此外，您还可以使用

usemo

钩子来保持

样式

对象，该对象返回

粗体

或

正常

。请注意，

toggleBold

会切换字体大小，因此，如果用户多次单击，它将在

bold

和

normal

之间切换

import React, { useState, useMemo } from 'react';

const BoldButon = () => {

    const [boldA, setBoldA] = useState(false)  
    const [boldB, setBoldB] = useState(false)

    const toggleBold = (buttonType) => () => {
        if(buttonType === 'firstButton') {
          setBoldA(prevState => !prevState)
        } else {
          setBoldB(prevState => !prevState)
        }
        
    }

    const buttonStyleA = useMemo(() => {
      return {fontWeight: boldA ? 'bold' : 'normal'}
    }, [boldA])

    const buttonStyleB = useMemo(() => {
      return {fontWeight: boldB ? 'bold' : 'normal'}
    }, [boldB])

    return (
        <div>
            <button style={buttonStyleA} onClick={toggleBold('firstButton')}>
                A   
            </button>
            <button style={buttonStyleB} onClick={toggleBold('secondButton')}>
                B
            </button>
        </div>
    )
} 

export default BoldButon;

import React，{useState，usemo}来自“React”；
常量BoldButon=（）=>{
const[boldA，setBoldA]=useState（false）
const[boldB，setBoldB]=useState（false）
常量toggleBold=（按钮类型）=>（）=>{
如果（buttonType==='firstButton'）{
setBoldA（prevState=>！prevState）
}否则{
setBoldB（prevState=>！prevState）
}
}
常量按钮样式=使用备注（（）=>{
返回{fontWeight:boldA？'bold'：'normal'}
}，[boldA]）
const buttonStyleB=useMemo（（）=>{
返回{fontWeight:boldB？'bold'：'normal'}
}，[boldB]）
返回(
A.
B
)
} 
导出默认的BoldButon；

text={{style:color}

-这应该做什么？在这种情况下，我只希望文本是黑色的，但现在看它可能没有什么用处。我想我需要在中使用三元运算符。谢谢你的回答。所以我现在正在使用它，但不幸的是，当我单击任何一个按钮时，结果都是粗体。你没有指定单击后，只有一个按钮应该是粗体的。让我来解决这个问题。是的，我也不确定，但因为它说：“小写a或大写a，按钮的

文本更改为粗体.B。”看起来可能只是一个按钮的文本需要加粗。但是是的，完全有可能阅读这个问题。你的答案很酷！可能有一些打字错误，我没有测试这个代码，它只是在编辑器上写的。但是我希望你能理解逻辑背后的想法，并且能够修复任何打字错误。
import React, { useState, useMemo } from 'react';

const BoldButon = () => {

    const [boldA, setBoldA] = useState(false)  
    const [boldB, setBoldB] = useState(false)

    const toggleBold = (buttonType) => () => {
        if(buttonType === 'firstButton') {
          setBoldA(prevState => !prevState)
        } else {
          setBoldB(prevState => !prevState)
        }
        
    }

    const buttonStyleA = useMemo(() => {
      return {fontWeight: boldA ? 'bold' : 'normal'}
    }, [boldA])

    const buttonStyleB = useMemo(() => {
      return {fontWeight: boldB ? 'bold' : 'normal'}
    }, [boldB])

    return (
        <div>
            <button style={buttonStyleA} onClick={toggleBold('firstButton')}>
                A   
            </button>
            <button style={buttonStyleB} onClick={toggleBold('secondButton')}>
                B
            </button>
        </div>
    )
} 

export default BoldButon;