reactjs - Enter 和 Backspace 不能在 React 中使用 Slate.js 编辑器
问题描述
我正在为应用程序实现文本编辑器,并尝试添加一些热键以进行快速编辑,例如粗体和斜体。由于某种原因,在我实现我的 onKeyDown 侦听器以呈现我的格式化文本后,我的退格键和输入按钮不再起作用。当onChange
键为退格键或回车键时,处理程序不会被触发,但会为每个其他键触发。下面是我的代码。
TextEditor.js
import React, { Component, Fragment } from 'react';
import { Editor } from 'slate-react';
import { Value } from 'slate';
import Icon from 'react-icons-kit';
import { bold } from 'react-icons-kit/feather/bold';
import { italic } from 'react-icons-kit/feather/italic';
import { BoldMark, ItalicMark } from './TextComponents/index';
import FormatToolbar from './FormatToolbar/FormatToolbar';
const initialValue = Value.fromJSON({
document: {
nodes: [
{
object: 'block',
type: 'paragraph',
nodes: [
{
object: 'text',
text: 'My first paragraph!'
},
],
},
],
}
});
class TextEditor extends Component {
state = {
value: initialValue
}
onKeyDown = (e, change) => {
if (!e.ctrlKey) {
console.log('[I am not a control key]');
return;
}
e.preventDefault();
console.log('[e key]', e.key);
switch (e.key) {
case 'b': {
change.toggleMark('bold');
return true;
}
case 'i': {
change.toggleMark('italic');
return true;
}
default: {
return false;
}
}
}
renderMark = props => {
const { type } = props.mark;
switch (type) {
case 'bold':
return <BoldMark {...props} />;
case 'italic':
return <ItalicMark {...props} />;
default:
return null;
}
}
onChange = ({ value }) => {
console.log('[on change]');
this.setState({
value
});
}
render () {
const { value } = this.state;
return (
<Fragment>
<FormatToolbar>
<button type="button" className="tooltip-icon-button">
<Icon icon={bold} />
</button>
<button type="button" className="tooltip-icon-button">
<Icon icon={italic} />
</button>
</FormatToolbar>
<Editor
value={value}
onKeyDown={this.onKeyDown}
onChange={this.onChange}
renderMark={this.renderMark}
/>
</Fragment>
);
}
}
export default TextEditor;
我似乎无法找到我所做的不同之处,并且想知道是否对 slate/react 进行了更改,这会阻止我遵循的代码按预期工作。
解决方案
对于使用相同教程并遇到此问题的任何人,我会参考 Slate.js 的文档
https://docs.slatejs.org/walkthroughs/adding-event-handlers
Correct code
onKeyDown = (e, editor, next) => {
if (!e.ctrlKey) {
return next();
}
e.preventDefault();
switch (e.key) {
case 'b': {
editor.toggleMark('bold');
return true;
}
case 'i': {
editor.toggleMark('italic');
return true;
}
default: {
return false;
}
}
}
Slate 2.0 已弃用change
,现在使用editor
. next
如果没有按下热键(在我的情况下是控制),请确保声明参数并在返回时调用它。
推荐阅读
- reactjs - 在 React / Nextjs 的文件夹中导入多个文件
- java - Kafka 2 消费者工厂监听器没有不断连接
- oh-my-zsh - 获取 oh-my-zsh 'history' 以显示命令日期和时间
- maven - 如何部署到 Nexus Sonatype 新的 Maven 模块
- c# - 如何使用 Json.Net 为数组项应用 CustomCreationConverter
- mysql - Mysql将现有列添加到另一个表
- php - Symfony 使用 GET 类型将参数传递给方法
- c++ - 为什么 cv::format 没有给我预期的结果?
- php - PHP 中需要 SQLPLUS 脚本来运行 Oracle 查询
- linux-kernel - 当它与进程结束或睡眠重叠时,如何通常阻止定时器中断