时间戳

首页 > 解决方案 > 自动完成编辑器（REACT，DRAFT-JS）

javascript - 自动完成编辑器（REACT，DRAFT-JS）

问题描述

我有一个家庭作业，我不知道该怎么做。做一个显示自动完成项目的 DRAFT-JS 编辑器非常简单。使用键盘自动完成中断（不在代码中）。但是我在更改状态编辑器时遇到了问题。这是代码的一尘不染的版本，请帮助我。

我尝试了一些用于自动完成的草稿 js 组件，但它让我在键盘上等待很糟糕。我认为这是一个聪明的解决方案，但我坚持这一点。

import React, { Component } from 'react';
import './testing.css';
import { Editor, EditorState, ContentState, convertToRaw } from 'draft-js';

 export default class Autocomplete extends React.Component {
 constructor (props){
    super(props);
 this.items=[
    "Test1",
    "Home",
    "Gold",
    "Miner",
    "Team",
    "Tenis",
 ];

    this.state = {
        suggestions: [],
        search: "",
        replace: "",
        testBool: false,
        editorState: EditorState.createEmpty()
    };
 }
        onTextChange = (editorState) => {


            var contentState = this.state.editorState.getCurrentContent();

            const editorContentRaw = convertToRaw(contentState);//Returning some values equals to bullshit
            const value =(editorContentRaw.blocks[0].text);
            console.log('editor test: '+ value);//Return value of editor

            const values=value.split(" ");//Get values to array

            let suggestions = [];
            if(value.length > 0){
                const regex = new RegExp(`^${value}`, 'i');
                 suggestions = this.items.sort().filter(v => regex.test(v));
            }

           this.setState(() => ({suggestions, editorState }));


        }



        suggestionSelected(value){
            this.setState(() => ({
                suggestion: [],


            }));

        }


        renderSuggestion (){
        const {suggestions} = this.state;
        if (suggestions.length === 0){
            return null;
            }

            return(
                <ul>
                 {suggestions.map((item) => <li onClick = {() => this.suggestionSelected(item)}> {item}</li>)}

                </ul>

        );
    }

    render() {

        return (
            <div  class="AutoCompleteText">
               <Editor onChange={this.onTextChange} editorState={this.state.editorState}/> 
                 {this.renderSuggestion()}

            </div>
        );
    }
}

标签： javascriptreactjsautocompleteeditordraftjs

解决方案

let trigger=false; //Triger for show/hide suggestions
window.addEventListener("keydown", event => { //event listener for keyboard shortcut
    if (event.ctrlKey && event.which === 32) {
      trigger = (!trigger); //switching true and false values
    }

  });

需要在主要组件之前。我知道了。

推荐阅读