在 reactjs 中将价值从一个组件共享到另一个组件答案

【问题标题】：share value from one component into another in reactjs在 reactjs 中将价值从一个组件共享到另一个组件
【发布时间】：2021-10-04 12:16:49
【问题描述】：

我为此使用了“React Draft Wysiwyg”。在下面的代码中，我想访问 desktop.js 文件中的变量 value editor.js 文件的值。我该怎么做？

editor.js：



export default class TextEditor extends Component {
render(){
  return(){
        <textarea
          disabled
         value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
        ></textarea>
    
      
    );
  }
}

desktop.js：

export const Desktop = () => {

    return (
      
        <div className="splitScreen">
            <TextEditor/>

        </div>
}

【问题讨论】：

你没有，直接。您可以useEffect 调用传递给<TextEditor> 的方法道具，或者将编辑器状态提升一个级别，或者......真的有很多方法可以完成。跨度>
从你的提问中不清楚这两个组件是相互关联的。
stackoverflow.com/questions/27864951/… 这应该可以解决你的问题

标签： javascript reactjs wysiwyg react-draft-wysiwyg

【解决方案1】：

我建议在 desktop.js 中使用useState，同时将textValue 的状态和setState 函数作为props 传递给TextEditor 组件：

import React, { useState } from "react";

export const Desktop = () => {
  const [textValue, setTextValue] = useState("");

  return (
    <div className="splitScreen">
      <TextEditor textValue={textValue} setTextValue={setTextValue} />
    </div>
  );
};

然后使用TextEditor里面的两个props：

import React, { Component } from "react";
import { Editor } from "react-draft-wysiwyg";
import { EditorState, convertToRaw } from "draft-js";
import "./editor.css";
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;

    // here you set the textValue state for the parent component
    this.props.setTextValue(
      draftToHtml(convertToRaw(editorState.getCurrentContent()))
    );

    return (
      <div className="editor">
        <Editor
          editorState={editorState}
          toolbarClassName="toolbarClassName"
          wrapperClassName="wrapperClassName"
          editorClassName="editorClassName"
          onEditorStateChange={this.onEditorStateChange}
        />
        <textarea
          disabled
          text_value={this.props.textValue} // here you use the textValue state passed as prop from the parent component
        ></textarea>
      </div>
    );
  }
}

【讨论】：

我收到这个错误：“TypeError: this.props.setTextValue is not a function”
@Johnst33 嗨，你添加了我在 desktop.js 文件中显示的两个道具吗？ <TextEditor textValue={textValue} setTextValue={setTextValue} />
@Johnst33 确保在TextEditor 组件中始终使用textValue 作为this.props.textValue（例如<p>{this.props.textValue}</p>），因为它取自从父组件传递给它的道具（桌面）。另外，如果这是您问题的正确答案，请将其标记为正确。

【解决方案2】：

首先，您需要从桌面组件将一个函数作为道具传递给 TextEditor。

喜欢这个 <TextEditor onChange={this.onChange}>。

在Desktop组件中声明一个方法如下

onChange = (value) => {
  console.log(value);
}

现在像这样在 onEditorStateChange 方法中的 TextEditor 组件中调用此方法

 onEditorStateChange = (editorState) => {
    this.setState({
      editorState,
    });
    this.props.onChange(draftToHtml(convertToRaw(editorState.getCurrentContent()));
  };

【讨论】：

我在 TextEditor.js 文件中收到错误“onchange is undefined”
在Desktop中使用的时候有没有在TextEditor的props中传过？
点赞<TextEditor onChange={this.onChange} />
是的，我确实通过了：在 desktop.js 文件中，但它仍然显示此错误