Блог

Я хотел бы создать свой функциональный компонент BoldButton, в котором, когда пользователь нажимает либо строчную, либо прописную букву A, текст кнопки изменяется на жирный. Ниже приведена моя незавершенная работа.

 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;
 

Это была одна из проблем, с которой я столкнулся при проведении пробного технического интервью, поэтому я хотел бы знать, как ее решить при использовании функционального компонента. ** Не уверен, нужно ли мне использовать useEffect для решения этой проблемы.

В настоящее время существует несколько проблем с синтаксисом, требующих решения:

1. text={{style:color}} не уверен, что это должно делать: текст не является стандартным или пользовательским реквизитом, который вы установили в любом месте компонента кнопки. Кроме того, допустим, вы должны были изменить цвет текста кнопки (что вы могли бы сделать с помощью style={{color}} тогда вы сможете изменить его, скажем, с черного на серый или с черного на желтый для другого акцента, но вы, кажется, сказали, что хотите другой шрифт-вес (жирный или не жирный) контролируется свойством CSS font-weight (и его можно задать в HTML или JSX через свойство style, которое могут иметь все элементы.
2. если у вас ничего нет в useEffect, вероятно, вы можете / должны избавиться от него. useEffect полезен, если состояние чего-либо меняется, и вам нужен побочный эффект, вы можете поместить его туда (или его можно использовать как странный componentDidMount, который будет запускаться только после того, как все родители запустили свой useEffect.
3. Для чего-то подобного может быть лучше использовать класс, а затем вы можете установить ряд свойств стиля с помощью одной строки: like is-подчеркнутый — это часто используемый класс, который может изменить вес шрифта на 600 и цвет на черный с темно-серого (при необходимости).
4. Вероятно, вам нужны отдельные состояния для каждой отдельной кнопки (поскольку вы хотите, чтобы каждая кнопка выделялась жирным шрифтом, если на нее нажимали: похоже, это основано на вашем вопросе).

     .is-emphasized {
      font-weight: 600;
      color: #000;
    }

 

Но если нет, то самый простой и быстрый способ приблизиться к этому:

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

 

 function BoldButon() {

    const [capitalABold, setCapitalABold] = React.useState(false)
    const [aBold, setaBold] = React.useState(false);

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

    return (
        <div>
            <button
              className={capitalABold ? 'is-emphasized' : ''}
              onClick={() => setCapitalABold(!capitalABold)}
            >
                A   
            </button>
            <button
              className={aBold ? 'is-emphasized' : ''}
              onClick={() => setaBold(!aBold)}
            >
                a
            </button>
        </div>
    )
} 

ReactDOM.render(<BoldButon/>, document.getElementById("root")); 

 * {
  color: #333;
  font-size: 14px;
}

.is-emphasized {
  color: #000;
  font-weight: 600;
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div> 

Вам не нужна useEffect такая функциональность, вы можете использовать useState перехват для управления переменной, которая определяет, нажал ли пользователь на кнопку. Кроме того, вы можете использовать useMemo перехват, чтобы сохранить style объект, который возвращает либо bold или normal . Пожалуйста, обратите внимание, что 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;