Estoy tratando de pasar datos de un componente basado en clases a un componente basado en funciones en reaccionar.
El componente de clase es un editor de pluma de reacción en el que intento obtener los datos escritos en el editor (editorHtml) y pasar los datos al componente funcional.
A continuación se muestra el código en el componente basado en clases
const CustomHeart = () => <span>♥</span>; function insertHeart() { console.log(this) const Quilly = this.quill const input = document.createElement("input"); input.setAttribute("type", "file"); input.click(); input.onchange = function(){ const cursorPosition = Quilly.getSelection().index; Quilly.insertText(cursorPosition, "♥"); Quilly.insertEmbed(cursorPosition,"image","https://cdn.pixabay.com/photo/2022/01/05/22/31/woman-6918210_960_720.jpg"); Quilly.setSelection(cursorPosition + 1); } } class Editor extends React.Component { state = { editorHtml: "" }; handleChange = html => { this.setState({ editorHtml: html }); }; static modules = { toolbar: { container: "#toolbar", handlers: { insertHeart: insertHeart } } }; static formats = [ "header", "font", "size", "bold"] } render() { return ( <div className="text-editor"> <CustomToolbar /> <ReactQuill value={this.state.editorHtml} onChange={this.handleChange} placeholder={this.props.placeholder} modules={Editor.modules} formats={Editor.formats} /> </div> ); } export default EditorPara el componente basado en funciones
Estoy tratando de pasar el valor de editorHtml al componente funcional a continuación
function SendEmail() { return ( <Editor > ) }Sé que puedo crear tanto un componente funcional como usar accesorios para pasar los datos, pero debido al uso de esta palabra clave en insertHeart en el componente de clase anterior... No pude usar un enfoque funcional
Debe administrar el estado de editorHTML en el componente principal y pasarlo a Editor .
<Editor handleChange={this.handleChange} editorHtml={this.state.editorHTML} />y acceda a él a través de los accesorios en el Editor:
<ReactQuill value={this.props.editorHtml} onChange={this.props.handleChange} placeholder={this.props.placeholder} modules={Editor.modules} formats={Editor.formats} />Después de dar vueltas por un tiempo, pude obtener la solución usando el método this.props para acceder al método setHtml en el componente de clase. Este método setHtml toma una cadena... y pasé el valor que estaba obteniendo de el editor al método setHtml... vea a continuación el código para resolver el problema...
class Editor extends React.Component { state = { editorHtml: "" }; handleChange = (html) => { this.setState({ editorHtml: html }); this.props.setHtml(html); }; }En el componente de función, configuro el estado de setHtml y también paso el valor del valor en Html
function SendEmail() { const [html, setHtml] = useState(""); {console.log(html)}//This would give you the value typed in your editor <Editor setHtml = {setHtml} /> }