Question

我正在尝试建立一个后台，您可以在其中添加/更新/删除展厅的项目。

当你想要添加一个新项目时，我有一个打开并显示4种语言的模型。每种语言都是崩溃的div。

所以我在主要组件的render方法中以这种方式实例化它们：

<Modal
    isOpen={this.state.addIsOpen}
    onAfterOpen={this.afterOpenModal}
    onRequestClose={this.closeModal}
    style={customStyles}
    contentLabel="Example Modal"
>
    <h2 ref="subtitle">Add a new Inspiration</h2>
    {
        languages.map((lang, i) => {
            return (
                <FormLanguage 
                    key={i}
                    lang={lang}
                />
            );
        })
    }
    <button onClick={this.closeModal}>Finish!</button>
</Modal>

表单语言，然后以这种方式实例化另一个容器：

render() {
        return (
            <form onSubmit={this.addProject} style={{marginTop: 35, marginBottom: 50}}>
                <h2 onClick={this.expand}>{this.props.lang} language</h2>
                    <div style={{display: this.state.showMore ? "block" : "none"}}>
                        <label>
                            Title:<br />
                            <textarea value={this.state.titles.lang} onChange={this.handleTitle} />
                        </label>
                        <br />
                        <label>
                            Description:<br />
                            <div style={{marginTop: 20, marginBottom: 20}}>
                                <RichEditorExample />
                            </div>
                        </label>
                        <br />
                        <input type="submit" value="Submit" />
                    </div>
            </form>
        );
    }

但是，当我尝试键入文本时，我发现我的所有textEditor都在同时填充。

texteditor的render方法（draftjs）：

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}
                ref="editor"
                spellCheck={true}
            />
        </div>
    </div>
);

使用构造函数负责onChange：

constructor(props) {
    super(props);

    this.focus = () => this.refs.editor.focus();
    this.onChange = (editorState) => {
        const { dispatch } = this.props;
        dispatch(updateText(editorState));
    };

所以，我喜欢＆＃34;该死的，我在这里错过了什么？＆＃34;。我应该在表单内部迭代而不是在父表单中进行迭代吗？

编辑：正如问题所述，我遵循Redux模式，所以这里是action / reducer方法：

export const UPDATE_TEXT = 'UPDATE_TEXT';

export function updateText(editorState) {
    return {
        type: UPDATE_TEXT,
        editorState
    };
};

还原剂：

export function editorText(state = {}, action) {
    switch (action.type) {
        case UPDATE_TEXT: 
            return action.editorState;
        default: 
            return state;
    };
};

Reactjs - Component texteditor：我的所有文本都在同时编辑

0 个答案: