激活时将 styles 添加到按钮，再次单击时将其删除

Question

我在一个带有会议、论坛等的平台中使用 react 和 Draft.js。这个编辑器允许用户在会议期间做笔记。 我想要实现的是，当用户单击“斜体”时，添加.active class 以让用户知道该按钮处于活动状态（更改背景颜色）并在不活动时将其删除。 这是我的代码：

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 方法中实现这一点。 我知道这应该很容易，但我在这里过得很艰难。

Answer 1

这很容易。 您需要的是 EditorState 的getCurrentLinlineStyle 。 它包含当前（您选择的）内联 styles。 您可以看到下面示例的链接。

Codesanbox 示例

Answer 2

使用 onMouseDown 而不是 onclick 事件会做到这一点，

export default function MyEditor() {
  
  const [editorState, setEditorState] = React.useState(
    () => EditorState.createEmpty(),
  );    
  

  const _onBoldClick = () => {
        setEditorState(RichUtils.toggleInlineStyle(editorState, 'BOLD'))
  }  

  return(
    <div>
        <button 
        // onClick={_onBoldClick} 
        onMouseDown={e=> {
          e.preventDefault();
          setEditorState(RichUtils.toggleInlineStyle(editorState, 'BOLD'))
        }}>BOLD</button>
        <div
        >
          <Editor 
            textAlignment="left" placeholder="Enter something here" 
            editorState={editorState} onChange={setEditorState} />
        </div>
        
    </div>
  ) 
  
    
}