React-ace: 不适合 redux-form

@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)

就这么简单，而且效果很好！

我现在有一个类似的问题。

我在 redux-form 中使用 react-ace，作为传递给 Field 的组件——就像上面一样。
每当编辑器失去焦点时，该值都会设置为“”，并且在 ace 编辑器中会显示点。

我的代码就像jschlieber提出的一样，看一下：

`从'反应'导入反应
从 'react-ace' 导入 AceEditor
从'lodash'导入_；

导入“大括号/模式/javascript”；
导入“大括号/主题/monokai”；

导出默认函数 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}
    />
)

}`

和

`从'react'导入反应，{组件}；
从'react-redux'导入{连接}；
从'../actions/index'导入{saveDraft}；
从'redux'导入{bindActionCreators}；
从'redux-form'导入{字段，reduxForm}；
从 '../components/redux_ace' 导入 ReduxAce

常量 ID = 'id123'，名称 = 'name123'，SOME_CODE = 'code123'；

函数 mapStateToProps({draft}) {
返回 {
草稿
};
}

函数mapDispatchToProps（调度）{
返回绑定ActionCreators（{
保存草稿
}， 派遣）
}

类草稿扩展组件{

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）（草稿）
)`

就在我刚才放评论的按钮之前，“//如果我把它放在这里，那么它突然就可以正常工作了 " - 所以是的，如果我将 Ace Editor 不作为 Field 组件放置，那么它的值不会被删除。你怎么看，我尝试使用 onBlur 处理程序并保留该值，但我做不到。

感谢您的任何提示！