Передача данных между компонентами с использованием значений полей TinyMCE и Updating - PullRequest
0 голосов
/ 25 июня 2018

Я пытаюсь загрузить изображение + текст в виде div в реагирование, используя пакет TinyMCE. Для рендера -

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 при рендеринге, чтобы я мог рендерить как прикрепленное изображение render

Проблема, с которой я сталкиваюсь, заключается в том, что когда я набираю что-либо в любом из этих двух текстовых полей, я получаю description 1 в console.log(type) в updatevalue(). Условие onEditorChange() из else никогда не срабатывает. Поэтому независимо от того, какое текстовое поле я использую, я всегда получаю одно и то же свойство id, которое 1 объявлено в state. Любое предложение о том, что я делаю не так здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...