React-ace: ne joue pas bien avec redux-form

@venil7 avez-vous pu intégrer un éditeur ACE sous une forme redux ?
Je dois faire exactement la même chose, pourriez-vous fournir un exemple de code s'il vous plaît?

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

puis utilisez-le:

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)

C'est aussi simple que ça et ça marche très bien !

J'ai un problème similaire en ce moment.

J'utilise react-ace dans redux-form, en tant que composant passé à Field - comme ci-dessus.
Chaque fois que l'éditeur perd le focus, la valeur est définie sur "" et des points sont affichés dans l'éditeur d'as.

Mon code est comme jschlieber proposé, jetez un oeil:

`importer React depuis 'react'
importer AceEditor depuis 'react-ace'
importer _ depuis 'lodash' ;

importer 'accolade/mode/javascript' ;
importer 'accolade/thème/monokai' ;

exporter la fonction par défaut 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}
    />
)

}`

et

`importer React, {Composant} de 'react' ;
importer { connecter } depuis 'react-redux' ;
import { saveDraft } depuis '../actions/index' ;
importer { bindActionCreators } depuis 'redux' ;
import { Field, reduxForm } from 'redux-form' ;
importer ReduxAce depuis '../components/redux_ace'

const ID = 'id123', NOM = 'nom123', SOME_CODE = 'code123';

function mapStateToProps({brouillon}) {
retourner {
Brouillon
} ;
}

function mapDispatchToProps(dispatch) {
return bindActionCreators({
enregistrer le brouillon
}, envoi)
}

classe Brouillon étend le composant {

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

}

exporter par défaut reduxForm({
valider,
formulaire : 'BrouillonFormulaire'
})(
connect(mapStateToProps, mapDispatchToProps)(Brouillon)
)`

juste avant le bouton j'ai mis un commentaire tout à l'heure, " // si je le mets ici, du coup ça marche bien " - donc oui, si je mets l'éditeur Ace tel quel et non en tant que composant Field, sa valeur n'est pas supprimée. Comme vous pouvez le voir, j'ai essayé d'utiliser le gestionnaire onBlur et de conserver la valeur, mais je n'ai pas pu.

Merci pour tout indice !