我正在尝试在我的项目中使用PrimeReact的Editor组件
import React from 'react';
import Editor from './editor/Editor';
const header = (
<span className="ql-formats">
<button className="ql-bold" aria-label="Bold"></button>
<button className="ql-italic" aria-label="Italic"></button>
<button className="ql-underline" aria-label="Underline"></button>
</span>
);
function Admin() {
return(
<div className="Admin">
<header className="App-header">
<Editor style={{height:'320px'}} value={this.state.text.bind(this)} onTextChange={(e) => this.setState({text: e.htmlValue}).bind(this)} />
</header>
</div>
);
}
但是当我运行此代码时,出现以下错误
TypeError:这是未定义的
问题在于误解文档
这是我解决此问题的方法。
import React, {Component} from 'react';
import Editor from './editor/Editor';
const header = (
<span className="ql-formats">
<button className="ql-bold" aria-label="Bold"></button>
<button className="ql-italic" aria-label="Italic"></button>
<button className="ql-underline" aria-label="Underline"></button>
</span>
);
export class Admin extends Component{
constructor() {
super();
this.state = {
text1 : '<div>Hello World!</div><div>PrimeReact <b>Editor</b> Rocks</div><div><br></div>',
text2 : ''
};
}
render(){
return (
<div className="Admin">
<header className="App-header">
<Editor style={{height:'320px'}} value={this.state.text1} onTextChange={(e) => this.setState({text: e.htmlValue})} />
</header>
</div>
);
}
}
您使用功能组件而不是类组件请阅读Function component vs class component
Function component vs class component 2
用于快捷方式使用useState
import React, {useState} from 'react'; //import useState
import Editor from './editor/Editor';
const header = (
<span className="ql-formats">
<button className="ql-bold" aria-label="Bold"></button>
<button className="ql-italic" aria-label="Italic"></button>
<button className="ql-underline" aria-label="Underline"></button>
</span>
);
function Admin() {
const [text,setText] = useState('')
return(
<div className="Admin">
<header className="App-header">
<Editor style={{height:'320px'}} value={text} onTextChange={(e) => setText({text: e.htmlValue}).bind(this)} />
</header>
</div>
);
}