从父级访问草案输出

Question

我有一个网站，我们在同一页面上使用多个表单。我使用创建富html文本输入，我定制了这些输入，只使用我实际需要的控件：

class RichEditor extends React.Component {
    constructor(props) {
        super(props);
        this.state = {editorState: EditorState.createEmpty()};

        this.focus = () => this.refs.editor.focus();
        this.onChange = (editorState) => {
            this.setState({editorState});
        }

        this.handleKeyCommand = (command) => this._handleKeyCommand(command);
        this.onTab = (e) => this._onTab(e);
        this.toggleBlockType = (type) => this._toggleBlockType(type);
        this.toggleInlineStyle = (style) => this._toggleInlineStyle(style);
    }

    _handleKeyCommand(command) {
        const {editorState} = this.state;
        const newState = RichUtils.handleKeyCommand(editorState, command);

        if (newState) {
            this.onChange(newState);
            return true;
        }
        return false;
    }

    _onTab(e) {
        const maxDepth = 4;
        this.onChange(RichUtils.onTab(e, this.state.editorState, maxDepth));
    }

    _toggleBlockType(blockType) {
        this.onChange(
            RichUtils.toggleBlockType(
                this.state.editorState,
                blockType
            )
        );
    }

    _toggleInlineStyle(inlineStyle) {
        this.onChange(
            RichUtils.toggleInlineStyle(
                this.state.editorState,
                inlineStyle
            )
        );
    }

    render() {
        const { editorState } = this.state;

        let className = 'RichEditor-editor';
        var contentState = editorState.getCurrentContent();

        if (!contentState.hasText()) {
            if (contentState.getBlockMap().first().getType() !== 'unstyled') {
                className += ' RichEditor-hidePlaceholder';
            }
        }

        return (
            <div className="RichEditor-root">
                <BlockStyleControls
                    editorState={editorState}
                    onToggle={this.toggleBlockType}
                />
                <InlineStyleControls
                    editorState={editorState}
                    onToggle={this.toggleInlineStyle}
                />
                <div className={className} onClick={this.focus}>
                <Editor
                    blockStyleFn={getBlockStyle}
                    customStyleMap={styleMap}
                    editorState={editorState}
                    handleKeyCommand={this.handleKeyCommand}
                    onChange={this.onChange}
                    onTab={this.onTab}
                    placeholder=""
                    ref="editor"
                    spellCheck={true}
                />
                </div>
            </div>
        );
    }
}

module.exports = RichEditor

我的父组件如下所示：

class WrapperComponent extends React.Component {

    constructor(props) {
        super(props);
        this.onChange = (editorState2) => {
            this.setState({editorState2});
            console.log("onChange");
            console.log(editorState2);
        }
        this.state = {
            editorState1: EditorState.createEmpty(),
            editorState2: EditorState.createEmpty(),
            html: null
        }
    }

    update() {
        console.log("update");
        console.log(this.state.editorState2);
        console.log(convertToRaw(this.state.editorState2.getCurrentContent()));
        //this.setState({ draftEditor2: e.value });
        this.setState({ html: stateToHTML(this.state.editorState2.getCurrentContent()) });
    }

    render () {

        const Editable = () => (
            <div className="editor">
                <div className="editor-inner">
                    <h3>Redigerar: Anbudsbrev</h3>
                    <h4>Rubrik</h4>
                    <input type="text" name="title" />
                    <h4>Text 1</h4>
                    <RichEditor editorState={this.state.editorState1} updateStateToParent={this.onChange} name="text01" ref="editor" />
                    <h4>Citat</h4>
                    <input type="text" name="quote01" />
                    <h4>Text 2</h4>
                    <RichEditor updateStateToParent={this.onChange} name="text02" ref="editor" />
                    <EditorFooter {...this.props} submitForm={this.submitForm} />
                    <button onClick={this.update.bind(this)}>Update</button>
                    <div>{this.state.html}</div>
                </div>
            </div>
        );

        const Readable = () => (
            <div>
                <h1 className="header66">{this.props.title}</h1>
                <div className="text66">{this.props.text01}</div>
                <div className="quote100">{this.props.quote01}</div>
                <div className="text66">{this.props.text02}</div>
            </div>
        );

        return (
            <div>
                { this.props.isInEditMode ? <Editable /> : <Readable /> }
            </div>
        );
    }
};

WrapperComponent.defaultProps = {
    height: 100,
    title: "Lorem ipsum dolor sit amet",
    text01: "Mauris sollicitudin purus accumsan libero fringilla, vitae vulputate lorem aliquam. Nunc ipsum nisl, consectetur ac ultrices ac, pretium vitae lectus. Cras vestibulum, arcu non condimentum hendrerit, dolor ante molestie ante, eget dapibus felis quam a ante. Nunc fringilla risus eget nunc tincidunt sodales.",
    quote01: "Aliquam erat volutpat.",
    text02: "Praesent non erat quis sem mollis sodales. Integer convallis metus in ligula vehicula, quis vulputate lectus accumsan. Aliquam luctus posuere mollis. Aliquam luctus dignissim quam, ut aliquet ligula pellentesque ac. Nulla sodales lacus sem, eu pharetra arcu aliquet ac. Sed in venenatis libero."
};

WrapperComponent.propTypes = {
    content: PropTypes.object,
    itemId: PropTypes.string
}

module.exports = WrapperComponent

但我好像误解了一些基本的东西。我无法从任何一个编辑那里得到价值。

如果我发送updateStateToParent到我的RichEditor，我可以看到一些事情正在发生，但我不能从RichEditor获取状态并将其添加到WrapperComponent状态。

我想我是以错误的方式来处理这件事，但我想不出如何解决这个问题。

Answer 1

我认为您在这里非常接近，但问题是您没有使用父程序来设置editorStates。您应该做的是在父组件中存储和更新editorStates。

这意味着RichEditor-component必须：

1. 接收它的editorState作为支柱
2. 告诉它的父级在它里面的变化，让父更新editorState (这反过来又会被传递下来)。

下面是一个很小的例子：

class RichEditor extends React.Component {
    render() {
        const { editorState, onChange } = this.props;

        return (
          <div style={{ background: 'white' }}>
            <Editor editorState={editorState} onChange={onChange} />
          </div>
        );
    }
}

反过来，家长必须：

1. 为每个editorStates创建初始RichEditor (并将它们传递下去)
2. 每次更改这些editorsStates时都更新它们

下面是一个很小的例子：

class WrapperComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            editorState1: EditorState.createEmpty(),
            editorState2: EditorState.createEmpty()
        }
    }

    onChange = (editorStateKey) => (editorState) => {
        this.setState({ [editorStateKey]: editorState });
    }

    render () {
      return (
        <div>
          <h4>Editor 1</h4>
          <RichEditor editorState={this.state.editorState1} onChange={this.onChange('editorState1')} />
          <h4>Editor 2</h4>
          <RichEditor editorState={this.state.editorState2} onChange={this.onChange('editorState2')} />
        </div>
      )
    }  
};

最后，这里有一个有用的小提琴：https://jsfiddle.net/bwk32xuo/