Question

我正在尝试使用TinyMCE包将image + text作为div中的div上传。渲染-

this.state = {
    services: [
        {
            id: 1,
            image: '',
            description: '',

        },
        {
            id: 2,
            image: '',
            description: '',
        }
    ],
}
render() {
    return (
        <div className="container">
            <form onSubmit={this.handleSubmit.bind(this)}>
                {this.state.services.map((v,i) => {
                    return (
                        <div key={v.id}>
                            <ServicePreview idx={v.id} 
                                            image={v.image} 
                                            description={v.description} 
                                            onChange={this.onServiceChange.bind(this, v.description)} 
                                            onImageChange={this.onImageChange.bind(this,v.image)}/>
                        </div>
                    )
                })}
            </form>
}

在服务预览组件中-

render() {
    return (
        <div className="card bg-color-9" key={this.props.idx}>
            {this.showFrom(this.props.idx)}
        </div>
    );
}

showFrom(i) {

        if ((i % 2) != 0) {

            return (

                    <Editor
                        id={'a' + i}
                        className="form-control"
                        type="text"
                        description="<p>This is the initial content of the editor</p>"
                        init={{
                            selector: "textarea",  
                            plugins: "textcolor",
                            toolbar: "forecolor backcolor",

                        }}
                        value={this.props.description}
                        onEditorChange={this.updatevalue.bind(this, 'descrption ' + i)}
                    />
                </div>
            )
        } 

        else {

        return ( 
                <Editor
                    className="form-control"
                    id={'a' + i}
                    type="text"
                    init={{
                        selector: "textarea",
                        plugins: "textcolor",
                        toolbar: "forecolor backcolor",

                    }}
                    value={this.props.description}
                    onEditorChange = {this.updatevalue.bind(this, 'descr' + i)}
                />
                )
                }

服务预览组件中的

updatevalue（）函数-

   updatevalue(type, e,id) {
        console.log(type)

        let obj = {};
        obj[type] = e;
        console.log(obj)
        this.props.onChange(obj);
   }

我在渲染中使用了if else，以便可以像附加的图像一样进行渲染

我面临的问题是，当我在这两个文本字段中的任何一个中键入任何内容时，都会在description 1的{{1}}中得到console.log(type)。 updatevalue()个条件中的onEditorChange()个不会触发。因此，无论我使用哪个文本字段，我总是得到相同的else属性，该属性在id中声明为1。有什么建议我在这里做错了吗？

使用TinyMCE和更新字段值在组件之间传递数据

0 个答案: