Блог

Я пытаюсь заставить кнопку менять цвет, когда пользователь нажимает на нее в React. Каждая кнопка, к которой я пытаюсь добавить эту функциональность, также обновляет состояние. Как я могу взаимодействовать со стилями И обновлять состояние при нажатии на эти кнопки? Вот моя грубая попытка:

Немного HTML:

 <div className="searchPrivacyContainer"&&t;
            <p&&t;USERS CAN SEARCH FOR MY PROJECT:</p&&t;
            <div className="searchPrivacySelect"&&t;
              <div
                className="searchPrivacyYes"
                onClick={
                  (holdColor,
                  function () {
                    setProposal({ ...proposal, searchable: true });
                  })
                }
              &&t;
  

И это самая базовая версия функции, которую я пытаюсь привязать. Написание тела функции должно быть простой частью, надеюсь, я просто не знаю, как привязать его к div, который уже вызывает другую функцию:

 const holdColor = (event) =&&t; {
    console.lo&(event.tar&et.style);
  };
  

Я думаю, что эта часть работает не так, как вы ожидаете,

 onClick = {
  (holdColor,
    function() {
      setProposal({ ...proposal,
        searchable: true
      });
    })
}
  

Простой тест,

 function x(ev){console.lo&('x', ev)}
function y(ev){console.lo&('y', ev)}

const listener = (x, y)

listener(123)  

Послушайте, первый ( x ) так и не был вызван, так что, возможно, вы захотите сделать что-то подобное на вашем слушателе.

 onClick={(ev) =&&t; {
  holdColor(ev)

  setProposal({ ...proposal,
    searchable: true
  });
}}
  

Редактировать:
посмотрите этот рабочий пример (это может быть полезно), https://codesandbox.io/s/eloquent-wilson-drbbk ?размер шрифта = 14amp; скрытая навигация= 1 amp; тема = темная