如何从一个组件获取价值到另一个组件？

Question

This is my TextEditor.js. I am willing to use it wherever I want it but when I use this component I am wishing to get the value associated with it every time it's state gets change.

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

---

I want to use it in below component. I want to use it so that I can get the value whenever its state get changed and I can save the data.

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;

---

So how can I get the value form TextEditor.js to AddBlog.js so that I can save it.

Answer 1

There are two solutions

1. use redux
2. create another file which stores the text, the functionallity would be something like when the user clicks save, the text is saved into the other file and you can reference it in AddBlog.js

Answer 2

1. Lift the editorState state up to the AddBlog component.
2. Pass a onEditorStateChange callback from AddBlog to TextEditor and it will set the editor state in AddBlog on edit.

TextEditor

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

AddBlog

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