React-ace: redux-form과 잘 작동하지 않습니다.

@venil7 redux 형식으로 ACE 편집기를 통합할 수 있었습니까?
똑같은 일을 해야 합니다. 코드 샘플을 제공해 주시겠습니까?

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)

그것만큼 간단하고 훌륭하게 작동합니다!

지금 비슷한 문제가 있습니다.

위와 같이 Field에 전달되는 구성 요소로 redux-form 내부에서 react-ace를 사용하고 있습니다.
편집기가 초점을 잃을 때마다 값이 ""로 설정되고 점이 ace 편집기 내부에 표시됩니다.

내 코드는 jschlieber가 제안한 것과 같습니다. 살펴보세요.

`'react'에서 React 가져오기
'react-ace'에서 AceEditor 가져오기
import _ from 'lodash';

'중괄호/모드/자바스크립트' 가져오기;
'중괄호/테마/모노카이' 가져오기;

내보내기 기본 기능 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}
    />
)

}`

그리고

`import React, { Component } from 'react';
'react-redux'에서 { 연결 } 가져오기;
'../actions/index'에서 { saveDraft } 가져오기;
'redux'에서 { bindActionCreators } 가져오기;
import { 필드, reduxForm } from 'redux-form';
'../components/redux_ace'에서 ReduxAce 가져오기

const ID = 'id123', 이름 = '이름123', SOME_CODE = '코드123';

함수 mapStateToProps({초안}) {
반품 {
초안
};
}

함수 mapDispatchToProps(디스패치) {
바인드액션크리에이터({
임시 보관함에 저장
}, 보내다)
}

클래스 초안 확장 구성 요소 {

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 Editor를 Field 컴포넌트가 아닌 그대로 넣으면 그 값이 지워지지 않습니다. 보시다시피 onBlur 핸들러를 사용하여 값을 보존하려고 했으나 실패했습니다.

힌트를 주셔서 감사합니다!