2

反応プロジェクトで ReactQuill コンポーネントを使用しています。私のページには (TextBox/InputNumber Box/DropDown) のような複数のコンポーネントがあるため、各コンポーネントからイベントを呼び出しています

<TextField  error={this.state.postForm.isValidationActive && !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だから私は同じイベントを呼び出したいのですが

TextField 入力の onChange は、名前と値を含むイベントを受け取ります。一方、Quill コンポーネントの onChange は、実際のコンテンツを受け取ります。

SO私は別のイベントメソッドを書いてみました

 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 Editor のテキスト領域には、私が書いているものは何も表示されません。

と ReactQuill COMPONENT のようになります

 <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 && !this.state.postForm.notesValid} onChange={this.handleChangeEditor} name="notesTextArea" />
4

1 に答える 1

1

したがって、いくつかの変更を加えた後、問題を修正できます

コンポーネントの最初の変更、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 && !this.state.postForm.notesValid} onChange={this.handleChangeEditor} name="notesTextArea" />

Handler メソッドの 2 番目の変更

 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 });
    };
于 2020-12-10T13:38:48.313 に答える