React-ace: Masalah dengan ace di dalam komponen Field dari Redux-Form

Dibuat pada 18 Des 2017  ·  6Komentar  ·  Sumber: securingsincity/react-ace

Saya memiliki masalah yang mirip dengan https://github.com/securingsincity/react-ace/issues/120 sekarang.

Saya menggunakan react-ace di dalam redux-form, sebagai komponen yang diteruskan ke Field.
Setiap kali editor kode kehilangan fokus, nilainya disetel ke "" dan dua titik ditampilkan di dalam editor as.

Kode saya seperti jschlieber dalam masalah asli yang diusulkan, lihat:

import React from 'react'
import AceEditor from 'react-ace'
import _ from 'lodash';

import 'brace/mode/javascript';
import 'brace/theme/monokai';

export default function ReduxAce (props) {
    console.log(props.input.onBlur, props);

    const {
        input,
        theme = 'monokai',
        mode = 'javascript',
        fontSize = 14,
        tabSize = 2,
        width = '1000px',
        height = '500px',
        ...custom
    } = props;

    return (
        <AceEditor
            theme={theme}
            mode={mode}
            fontSize={fontSize}
            tabSize={tabSize}
            width={width}
            height={height}
            onBlur={() => props.input.onBlur(props.input.value)}
            editorProps={{$blockScrolling: Infinity}}
            {...input}
            {...custom}
        />
    )
}

dan

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { saveDraft } from '../actions/index';
import { bindActionCreators } from 'redux';
import { Field, reduxForm } from 'redux-form';
import ReduxAce from '../components/redux_ace'

const ID = 'id123', NAME = 'name123', SOME_CODE = 'code123';

function mapStateToProps({draft}) {
    return {
        draft
    };
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        saveDraft
    }, dispatch)
}


class Draft extends Component {
    renderField(field) {
        return (
            <div className="form-group">
                <label>{field.label}</label>
                <input
                    className="form-control"
                    type="text"
                    {...field.input}
                />
            </div>
        )

    }

    onSubmit(values) {
        console.log('sub',values);

        this.props.saveDraft({
            id: values[ID],
            name: values[NAME],
            code: values[SOME_CODE]
        });
    }

    render() {
        const { handleSubmit } = this.props;

        return (
            <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                <Field
                    label="Id"
                    name={ID}
                    component={this.renderField}
                />

                <Field
                    label="Name"
                    name={NAME}
                    component={this.renderField}
                />
                <Field
                    label="Lambda code"
                    name={SOME_CODE}
                    component={ReduxAce}
                />

                // if I put it here, then it suddenly works fine <ReduxAce/>
                <button type="submit" className="btn btn-primary"> Submit</button>
            </form>
        );
    }
}

export default reduxForm({
    validate,
    form: 'DraftForm' 
})(
    connect(mapStateToProps, mapDispatchToProps)(Draft)
)

tepat sebelum tombol saya memberi komentar sekarang, // if I put it here, then it suddenly works fine <ReduxAce/> - jadi ya, jika saya menempatkan Editor Ace sebagai bukan sebagai komponen Bidang, maka nilainya tidak dihapus. Bagaimana Anda bisa melihat, saya mencoba menggunakan handler onBlur dan mempertahankan nilainya, tetapi saya tidak bisa.

Terima kasih untuk setiap petunjuk!

awaiting response

Komentar yang paling membantu

const aceOnBlur = (onBlur) => (_event, editor?) => {
    const value = editor.getValue();
    onBlur(value);
};

...
return (
    <AceEditor
          className={className}
          mode='html'
          theme='monokai'
          enableBasicAutocompletion={true}
          showPrintMargin={false}
          tabSize={4}
          setOptions={options}
          width='1000px'
          name={input.name}
          onBlur={aceOnBlur(input.onBlur)}
          onChange={input.onChange}
          onFocus={input.onFocus}
          value={input.value}
    />
)

bekerja dengan baik untuk saya

Semua 6 komentar

Saya punya masalah yang sama. Saya tidak melihat masalah dengan versi 5.1.1 , tetapi dalam 5.8.0 itu masalah. Akan memperbarui jika saya bisa mengetahuinya.

const aceOnBlur = (onBlur) => (_event, editor?) => {
    const value = editor.getValue();
    onBlur(value);
};

...
return (
    <AceEditor
          className={className}
          mode='html'
          theme='monokai'
          enableBasicAutocompletion={true}
          showPrintMargin={false}
          tabSize={4}
          setOptions={options}
          width='1000px'
          name={input.name}
          onBlur={aceOnBlur(input.onBlur)}
          onChange={input.onChange}
          onFocus={input.onFocus}
          value={input.value}
    />
)

bekerja dengan baik untuk saya

@drewen @spoonscen - Apakah salah satu dari Anda memiliki saran tentang ini karena kalian telah menggunakan formulir redux di masa lalu?

@avalkowsky - apakah saran @JFFby berfungsi? OnBlur dalam contoh Anda meneruskan nilai input saat ini ke onBlur reduxForm yang mengatur ulang input, tetapi saya tidak percaya nilai itu diperbarui saat Anda mengetik. Saya yakin ini mengembalikan nilai __original__ setiap kali, bukan nilai baru yang baru saja Anda ketikkan ke editor; saat bekerja dengan komponen kustom, Anda memiliki dua status untuk dikerjakan: data penyimpanan bentuk redux dan nilai aktual pada input.

@drewen Saya akan memberi Anda beberapa detail besok!

@JFFby maaf, butuh waktu lama, saya malu.

Solusi Anda berhasil!

@drewen terima kasih, saya merindukan itu 👍

@taylordowns2000

Saya juga menurunkan react-ace ke 5.1.1 dan mencobanya tanpa panggilan balik onBlur tetapi tidak berhasil.
Mungkin saya membuat kesalahan lain, namun jika saya adalah pengembang dari masa depan yang mengalami masalah ini, saya akan menggunakan solusi JFFbys :)

Terima kasih semua atas bantuannya!

Apakah halaman ini membantu?
0 / 5 - 0 peringkat