Este es mi TextEditor.js. Estoy dispuesto a usarlo donde quiera, pero cuando uso este componente, deseo obtener el valor asociado cada vez que cambia su estado.

 import React, { Component } from "react"; import { Editor } from "react-draft-wysiwyg"; import { EditorState, convertToRaw } from "draft-js"; import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css"; import draftToHtml from "draftjs-to-html"; export default class TextEditor extends Component { state = { editorState: EditorState.createEmpty(), }; onEditorStateChange = (editorState) => { this.setState({ editorState, }); }; render() { const { editorState } = this.state; console.log(draftToHtml(convertToRaw(editorState.getCurrentContent()))); //I want to get draftToHtml(convertToRaw(editorState.getCurrentContent())) whenever I call this component return ( <div> <Editor editorState={editorState} toolbarClassName="toolbarClassName" wrapperClassName="wrapperClassName" editorClassName="editorClassName" onEditorStateChange={this.onEditorStateChange} /> </div> ); } }

Quiero usarlo en el siguiente componente. Quiero usarlo para poder obtener el valor cada vez que cambie su estado y pueda guardar los datos.

 import React, {useState} from 'react'; import axios from "axios" import ReactDOM from 'react-dom'; import {Editor, EditorState,RichUtils} from 'draft-js'; import 'draft-js/dist/Draft.css'; import TextEditor from '../TextEditor'; function AddBlog() { return <div> <h3 className='text-center my-3'> Add blog </h3><hr/> <div className='col-lg-6 mx-auto'> <form> <div class="mb-3 border p-2 rounded-3"> <label for="exampleInputPas1" class="form-label">Description</label> <input type="text" hidden value={desc} onChange={(e)=>setDesc(e.target.value)} class="form-control" id="exampleInputrd1" /> <div className="editor"> <TextEditor /> //I want the value from TextEditor so that I can save it. </div> </div> <div className='d-flex justify-content-end'> <button type="submit" onClick={submitForm} class="btn btn-danger btn-sm">Add</button> </div> </form> </div> </div>; } export default AddBlog;

Entonces, ¿cómo puedo obtener el valor de TextEditor.js a AddBlog.js para poder guardarlo?

about 4 years ago · Juan Pablo Isaza

2 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

Answer 1 · 2022-07-04T13:23:08.091Z

hay dos soluciones

usar redux
cree otro archivo que almacene el texto, la funcionalidad sería algo así como cuando el usuario hace clic en guardar, el texto se guarda en el otro archivo y puede hacer referencia a él en AddBlog.js

Answer 2 · 2022-07-04T13:23:08.100Z

Eleve el estado editorState hasta el componente AddBlog .
Pase una devolución de llamada onEditorStateChange de AddBlog a TextEditor y establecerá el estado del editor en AddBlog al editar.

Editor de texto

 export default class TextEditor extends Component { render() { console.log(draftToHtml(convertToRaw(this.props.editorState.getCurrentContent()))); return ( <div> <Editor editorState={this.props.editorState} onEditorStateChange={this.props.onEditorStateChange} /> </div> ); } }

AgregarBlog

 import {useState} from 'react' import { EditorState } from "draft-js"; function AddBlog() { const [editorState,setEditorState] = useState(EditorState.createEmpty()) const onEditorStateChange = (editorState) => { setEditorState(editorState) } return ( <div> <TextEditor onEditorStateChange={onEditorStateChange} editorState={editorState}/> </div> ); }

0

92

¿Cómo puedo pasar el valor de un componente a otro?

Este es mi TextEditor.js. Estoy dispuesto a usarlo donde quiera, pero cuando uso este componente, deseo obtener el valor asociado cada vez que cambia su estado.

Quiero usarlo en el siguiente componente. Quiero usarlo para poder obtener el valor cada vez que cambie su estado y pueda guardar los datos.

Entonces, ¿cómo puedo obtener el valor de TextEditor.js a AddBlog.js para poder guardarlo?

2 Respostas

0

0

Encontrar trabalhos remotos

Andres GPT