React-ace: tidak cocok dengan redux-form

@ venil7 apakah Anda dapat mengintegrasikan editor ACE dalam bentuk redux?
Saya harus melakukan hal yang sama persis, bisakah Anda memberikan beberapa contoh kode?

import React from 'react'
import AceEditor from 'react-ace'

export default function ReduxAce (props) {
  const {
    input,
    theme = 'github',
    mode = 'html',
    fontSize = 14,
    tabSize = 2,
    width = '1000px',
    height = '500px',
    ...custom
  } = props
  return (
    <AceEditor
      theme={theme}
      mode={mode}
      fontSize={fontSize}
      tabSize={tabSize}
      width={width}
      height={height}
      editorProps={{$blockScrolling: true}}
      {...input}
      {...custom}
    />
  )
}

dan kemudian menggunakannya:

import React from 'react'
import { reduxForm } from 'redux-form'
import ReduxAce from './path/to/ReduxAce'

function MyForm (props) {
  const { handleSubmit } = props
  return (
    <form onSubmit={handleSubmit}>
      <Field
        name='staticHtml'
        component={ReduxAce}
      />
    </form>
  )
}

export default reduxForm({
  form: 'edit-static-html',
  onSubmit (values, dispatch, props) {
    console.log('submit...')
  }
})(MyForm)

Ini sesederhana itu dan itu bekerja dengan baik!

Saya memiliki masalah serupa sekarang.

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

Kode saya seperti yang diusulkan jschlieber, lihat:

`impor Bereaksi dari 'bereaksi'
impor AceEditor dari 'react-ace'
impor _ dari 'lodash';

impor 'brace/mode/javascript';
impor 'brace/tema/monokai';

ekspor fungsi default ReduxAce (alat peraga) {
console.log(alat peraga.input.onBlur, alat peraga);

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, { Komponen } dari 'react';
import { connect } dari 'react-redux';
impor { saveDraft } dari '../actions/index';
impor { bindActionCreators } dari 'redux';
import { Field, reduxForm } dari 'redux-form';
impor ReduxAce dari '../components/redux_ace'

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

fungsi mapStateToProps({draft}) {
kembali {
minuman
};
}

fungsi mapDispatchToProps(pengiriman) {
kembalikan bindActionCreators({
menyimpan konsep
}, menugaskan)
}

class Draft meluas Komponen {

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>
    );
}

}

ekspor default reduxForm({
mengesahkan,
formulir: 'DrafForm'
})(
hubungkan(mapStateToProps, mapDispatchToProps)(Draft)
)`

tepat sebelum tombol saya memberi komentar sekarang, " // jika saya meletakkannya di sini, maka tiba-tiba berfungsi dengan baik " - jadi ya, jika saya menempatkan Ace Editor sebagai bukan sebagai komponen Field, 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!