时间戳

首页 > 解决方案 > 如何在 Draft.js 中通过更改字体系列样式来设置按钮颜色

reactjs - 如何在 Draft.js 中通过更改字体系列样式来设置按钮颜色

问题描述

我有这样的编辑器，带有三个按钮和文本区域，如何设置bg color: grey带有更改字体文本样式的按钮，

<Col>
    <span className = ""></span>
    <div>
    <button onMouseDown = { e => { _onUnderlineClick(e) } }>U</button>
    <button onMouseDown = { e => { _onBoldClick(e)} }>B</button>
    <button onMouseDown = { e => { _onItalicClick(e)} }><em>I</em></button>
    </div>
    <Editor editorState={editorState}
        onChange={onEnterText} handleBeforeInput={handleBeforeInput} handlePastedText={handlePastedText} handleKeyCommand={handleKeyCommand} keyBindingFn={keyBindingFn}
        readOnly = {e}
    />
</Col>

DraftJS

按钮颜色必须在单击按钮时更改，以及在 DraftJS 文本样式动态更改时使用退格键，当时也是如此

标签： reactjsdraftjs

解决方案

您可以使用状态变量进行样式设置，并且当您的事件处理程序调用时，您可以更改您的状态，这将自动更改按钮的样式。例如。你想动态地改变按钮的样式。

const [btnSty,setSty]=useState("property value")//set default propert value
const handleMouse=()=>{
setSty("set here")//property you want to set dynamically
}
<button onMouseDown = {handleMouse} style={{anyProperty:{btnSty}}>B</button>

推荐阅读