Добавляйте стили к кнопке, когда она активна, и удаляйте их при повторном нажатии - PullRequest
Новая
       25

Добавляйте стили к кнопке, когда она активна, и удаляйте их при повторном нажатии

0 голосов
/ 09 апреля 2020

Я работаю с реакцией и черновиком. js на платформе с собраниями, форумами и т. Д. c. Этот редактор позволяет пользователю делать заметки во время встреч. Чего я хочу добиться, так это, когда пользователь нажимает «Itali c», добавить класс .active, чтобы сообщить пользователю, что кнопка активна (изменить цвет фона), и удалить ее, когда ее нет. Это мой код: 

export const ActionButton = styled.div`
  color: #272a2d;
  padding: 3px 7px;
  margin-top: 13px;

 .active {
   background-color: pink
 }

&:hover {
  background-color: #f2f4f6;
  border-radius: 8px;
  cursor: pointer;
}
.icon-toolbar-custom-icons {
border: none;
border-radius: 8px;
padding: 5px;

&:hover {
  background-color: #f2f4f6;
}

${mediaQuery} {
  padding: 0;
}
}
`;
const estilosTooltipInfo = makeStyles(theme => ({
arrow: {
 color: theme.palette.common.black,
 },
tooltip: {
 backgroundColor: theme.palette.common.black,
 fontSize: '13px',
 padding: '8px 10px',
 borderRadius: 6,
 },
}));
 function TooltipInfo(props) {
  const classes = estilosTooltipInfo();
  return <Tooltip placement="bottom" classes={classes} {...props} />;
 }

function TooltipItalic(props) {
const handleSetItalic = () => {
const newState = RichUtils.toggleInlineStyle(props.editorState, 'ITALIC');
if (newState) {
  props.onChange(newState);
}
   };
 return (
<div>
  <TooltipInfo title="Cursiva">
    <ActionButton
      className="icon-toolbar-custom-icons"
      onClick={handleSetItalic}
    >
      <FormatItalicIcon />
    </ActionButton>
  </TooltipInfo>
</div>
 );
}

Я не знаю, как этого добиться в моем методе onClick. Я знаю, это должно быть легко, но мне трудно здесь.

1 Ответ

0 голосов
/ 10 апреля 2020

Это довольно легко. Что вам нужно, это getCurrentLinlineStyle из EditorState. Он содержит текущие (выбранные вами) встроенные стили. Вы можете увидеть ссылку с примером ниже.

Пример Codesanbox

...