Javascript TypeError这是使用primereact时未定义的whyle

我试图在我的项目中使用PrimeReact中的编辑器组件

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

从“React”导入React；
从“./Editor/Editor”导入编辑器；
常数头=(
);
函数Admin（）{
返回(
this.setState（{text:e.htmlValue}）.bind（this）}/>
);
}

但当我运行这段代码时，我得到以下错误

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

import React，{Component}来自'React'；
从“./Editor/Editor”导入编辑器；
常数头=(
);
导出类管理扩展组件{
构造函数（）{
超级（）；
此.state={
text1:“你好，世界！PrimeReact编辑器”
，
文本2:“”
};
}
render（）{
返回(
this.setState（{text:e.htmlValue}）}/>
);
}
}

问题在于对文档的误解

下面是我如何解决这个问题的

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

import React，{Component}来自'React'；
从“./Editor/Editor”导入编辑器；
常数头=(
);
导出类管理扩展组件{
构造函数（）{
超级（）；
此.state={
text1:“你好，世界！PrimeReact编辑器”
，
文本2:“”
};
}
render（）{
返回(
this.setState（{text:e.htmlValue}）}/>
);
}
}

您使用的是函数组件而不是类组件 请阅读

对于快捷方式解决方案，请使用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>
    );
}

import React，{useState}来自“React”//导入使用状态
从“./Editor/Editor”导入编辑器；
常数头=(
);
函数Admin（）{
const[text，setText]=useState（“”）
返回(
setText（{text:e.htmlValue}）.bind（this）}/>
);
}

您使用的是函数组件而不是类组件 请阅读

对于快捷方式解决方案，请使用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>
    );
}

import React，{useState}来自“React”//导入使用状态
从“./Editor/Editor”导入编辑器；
常数头=(
);
函数Admin（）{
const[text，setText]=useState（“”）
返回(
setText（{text:e.htmlValue}）.bind（this）}/>
);
}

看起来您使用的是功能组件而不是基于类的组件，在这种情况下，您不能使用“this”。看起来您使用的是功能组件而不是基于类的组件，在这种情况下，您不能使用“this”。