TypeError: это неопределенный тип, который использует primereact - PullRequest
Новая
       9

TypeError: это неопределенный тип, который использует primereact

1 голос
/ 17 января 2020

Я пытаюсь использовать компонент Editor из 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>
    );
}

, но когда я запускаю этот код, я получаю следующую ошибку

TypeError: это не определено

Ответы [ 2 ]

0 голосов
/ 17 января 2020

Вы используете компонент функции, а не компонент класса, пожалуйста прочитайте Компонент функции против компонента класса

Компонент функции против компонента класса 2

для быстрого решения use 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>
    );
}
0 голосов
/ 17 января 2020

Проблема была в неправильном понимании документации

Вот как я решил эту проблему. 

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