React-ace: لا يلعب بشكل جيد مع الشكل المعاد

@ venil7 هل تمكنت من دمج محرر ACE في صيغة redux؟
يجب أن أفعل نفس الشيء بالضبط ، هل يمكنك تقديم بعض نماذج التعليمات البرمجية من فضلك؟

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)

الأمر بهذه البساطة ويعمل بشكل رائع!

لدي مشكلة مماثلة الآن.

أنا أستخدم رد فعل آس داخل نموذج إعادة ، كمكون تم تمريره إلى الحقل - تمامًا كما هو مذكور أعلاه.
في أي وقت يفقد المحرر التركيز ، يتم تعيين القيمة على "" ويتم عرض النقاط داخل محرر ace.

الكود الخاص بي يشبه تمامًا ما اقترحه jschlieber ، ألق نظرة:

"استيراد رد من" رد فعل "
استيراد AceEditor من "رد فعل آيس"
استيراد _ من "لوداش" ؛

استيراد "قوس / وضع / جافا سكريبت" ؛
استيراد "دعامة / موضوع / monokai" ؛

تصدير الوظيفة الافتراضية ReduxAce (الدعائم) {
console.log (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}
    />
)

} `

و

`استيراد React ، {مكون} من 'رد فعل' ؛
استيراد {connect} من "رد فعل إعادة الإرسال" ؛
استيراد {saveDraft} من "../actions/index" ؛
استيراد {bindActionCreators} من "redux" ؛
استيراد {Field، reduxForm} من "redux-form"؛
استيراد ReduxAce من "../components/redux_ace"

معرف const = 'id123' ، NAME = 'name123' ، SOME_CODE = 'code123' ؛

وظيفة mapStateToProps ({مسودة}) {
إرجاع {
مسودة
} ؛
}

وظيفة mapDispatchToProps (إرسال) {
إرجاع bindActionCreators ({
حفظ المسودة
}، إرسال)
}

مسودة الفئة توسع المكون {

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 الافتراضي ({
التحقق من صحة
النموذج: "DraftForm"
}) (
اتصال (mapStateToProps ، mapDispatchToProps) (مسودة)
) `

قبل الزر أضع تعليقًا الآن ، "/ إذا وضعته هنا ، فسيعمل بشكل جيد فجأة "- نعم ، إذا وضعت محرر Ace على أنه ليس مكون حقل ، فلن يتم حذف قيمته. كيف يمكنك أن ترى ، حاولت استخدام معالج onBlur والحفاظ على القيمة ، لكنني لم أستطع.

شكرا لأية تلميحات!