Блог

Я использую компонент ReactQuill в своем проекте react . На моей странице у меня есть несколько компонентов, таких как (текстовое поле / поле ввода / выпадающий список), поэтому из каждого компонента я вызываю событие

 <TextField  error={this.state.postForm.isValidationActive amp;amp; !this.state.postForm.targetDateValid} name="targetDate" onChange={this.handleChange} type="date"  label="Target date" variant="outlined"  />
 

Таким образом, этот компонент также вызывает handleChange событие, и это onChange пройдет event , и из события мы можем получить value

  handleChange(event) {
        console.log('Value', event.target.value);
}
 

Итак, я хочу вызвать одно и то же handelChange событие, но

onChange для ввода текстового поля получает событие, содержащее имя и значение.С другой стороны, onChange для компонента Quill получает фактическое содержимое.

ПОЭТОМУ я попытался написать отдельный метод события

  handleChangeEditor(editor) {
        console.log('background', editor);
        let _postForm = this.state.postForm;

        _postForm.notesValid = true;
        _postForm.notes = editor;

        if (editor.length < 30) { _postForm.notesValid = false; }

        

        this.setState({ ...this.state, postForm: _postForm });
    };
 

Но после выполнения этого в этой строке кода возникает некоторая проблема
this.setState({ ...this.state, postForm: _postForm }); если я добавлю это, то текстовая область редактора ReactQuill не будет показывать ничего, что бы я ни писал.

и компонент ReactQuill будет выглядеть так

  <ReactQuill theme="snow" formats={this.formats} value={this.state.text || ''} modules={this.modules} placeholder="Write Something about your view" id="notesTextArea" error={this.state.postForm.isValidationActive amp;amp; !this.state.postForm.notesValid} onChange={this.handleChangeEditor} name="notesTextArea" />
 

Итак, после нескольких изменений я могу исправить проблему

Первое изменение в компоненте, в value используемом разделе this.state.postForm.notes

 <ReactQuill theme="snow" formats={this.formats} value={this.state.postForm.notes || ''} modules={this.modules} placeholder="Write Something about your view" id="notesTextArea" error={this.state.postForm.isValidationActive amp;amp; !this.state.postForm.notesValid} onChange={this.handleChangeEditor} name="notesTextArea" />
 

Второе изменение в методе обработчика

  handleChangeEditor(editor) {
        console.log('background', editor);
        let _postForm = this.state.postForm;

        _postForm.notesValid = true;
        _postForm.notes = editor;

        if (editor.length < 30) { _postForm.notesValid = false; }



        this.setState({ ...this.state, postForm: _postForm });
    };