React-ace: रेडक्स-फॉर्म के साथ अच्छा नहीं खेलता

@ venil7 क्या आप एक एसीई संपादक को रेडक्स-फॉर्म में एकीकृत करने में सक्षम हैं?
मुझे वही काम करना है, क्या आप कृपया कुछ कोड नमूना प्रदान कर सकते हैं?

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

और फिर इसका इस्तेमाल करें:

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)

यह उतना ही सरल है और यह बहुत अच्छा काम करता है!

मेरे पास अभी एक समान समस्या है।

मैं रेडक्स-फॉर्म के अंदर प्रतिक्रिया-ऐस का उपयोग कर रहा हूं, जैसा कि ऊपर की तरह - फ़ील्ड को पास किए गए घटक के रूप में।
जब भी संपादक फ़ोकस खो देता है, तो मान "" पर सेट हो जाता है और इक्का संपादक के अंदर बिंदुओं को प्रदर्शित किया जाता है।

मेरा कोड ठीक उसी तरह है जैसे jschlieber प्रस्तावित है, एक नज़र डालें:

'प्रतिक्रिया' से 'आयात प्रतिक्रिया'
ऐसएडिटर को 'रिएक्शन-ऐस' से आयात करें
आयात _ 'लॉश' से;

आयात 'ब्रेस/मोड/जावास्क्रिप्ट';
आयात 'ब्रेस/थीम/मोनोकाई';

निर्यात डिफ़ॉल्ट फ़ंक्शन ReduxAce (प्रॉप्स) {
कंसोल.लॉग (props.input.onBlur, सहारा);

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

}`

तथा

'प्रतिक्रिया' से 'आयात प्रतिक्रिया, {घटक};
'रिएक्शन-रेडक्स' से आयात {कनेक्ट};
आयात { saveDraft } '../actions/index' से;
'रेडक्स' से आयात {bindActionCreators};
आयात {फ़ील्ड, reduxForm} 'redux-form' से;
ReduxAce को '../components/redux_ace' से आयात करें

कॉन्स्ट आईडी = 'id123', NAME = 'name123', SOME_CODE = 'code123';

फ़ंक्शन मैपस्टेटटॉपप्रॉप्स ({ड्राफ्ट}) ​​{
वापसी {
प्रारूप
};
}

फ़ंक्शन मैपडिस्पैचटॉपप्रॉप्स (प्रेषण) {
वापसी बाइंडएक्शन क्रिएटर({
लिखित को सुरक्षित करो
}, प्रेषण)
}

क्लास ड्राफ्ट कंपोनेंट को बढ़ाता है {

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

}

निर्यात डिफ़ॉल्ट reduxForm({
मान्य करना,
फॉर्म: 'ड्राफ्टफॉर्म'
})(
कनेक्ट (mapStateToProps, mapDispatchToProps) (ड्राफ्ट)
)`

बटन के ठीक पहले मैं अभी एक टिप्पणी डालता हूं, "//अगर मैं इसे यहां रखता हूं, तो यह अचानक ठीक काम करता है " - तो हाँ, अगर मैं ऐस संपादक को फ़ील्ड घटक के रूप में नहीं रखता, तो उसका मान हटाया नहीं जाता है। आप कैसे देख सकते हैं, मैंने ऑनब्लर हैंडलर का उपयोग करने और मूल्य को संरक्षित करने का प्रयास किया, लेकिन मैं नहीं कर सका।

किसी भी संकेत के लिए धन्यवाद!