在按钮处于活动状态时向按钮添加样式，并在再次单击时将其删除

Question

我在会议、论坛等平台上使用 React 和 Draft.js。此编辑器允许用户在会议期间做笔记。我想要实现的是，当用户单击 'Italic' 添加 .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

这很容易。你需要的是 getCurrentLinlineStyle 的 EditorState。它包含当前（您选择的）内联样式。您可以在下面的示例中看到 link。

Codesanbox example

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>
  ) 
  
    
}

在按钮处于活动状态时向按钮添加样式，并在再次单击时将其删除

Add styles to button when is active and remove them when clicked again

javascript

jquery

reactjs

draftjs