在 React-Admin 中保存自定义组件的更改

Question

如何将自定义组件的输出保存回 React Admin 模型？

我有一个带有一个自定义组件的表单，该组件是 CodeMirror 字段。对其他所有内容的更改均正确保存。但是我的 CodeMirror 字段虽然可以作为编辑器正常工作并按我想要的方式配置，但不会保存更改。

我是 React-Admin 的新手，并且对 React 的经验有限，所以我想我错过了一些基本的东西。

const handleChange = (field) => (val, evt) => {
  // I reach here with `field` set to the instance of MyEditField, with `val`
  // set to the updated editor value, and `evt` the CodeMirror event

  // But now how do I update the underlying record?

  // The following will update the stored copy, but doesn't mark it as a change 
  // to be saved by the dataProvider.   (And I know it doesn't make sense with Redux.)

  field.props.record.myField = val;
}

class MyEditField extends Component {
  constructor(props) {
    super(props)
    this.value = beautify(props.record[props.source]);

    // CodeMirror setup

    this.options = {/* CodeMirror options */}
  }

  render() {
    return (
      <CodeMirror 
        ref="CodeMirror" 
        value={this.value} 
        onChange={handleChange(this)} 
        options={this.options}
      />
    )
  }  
}

export default addField(MyEditField)

我handleChange在这里强调并不是因为我认为这就是我认为应该进行更改的地方，而只是为了证明如果我需要一个地方来悬挂正确的代码，我就有一个。安onBlur可能会更好。关键是我确实有办法运行我需要的任何代码，并可以访问我的字段和 CodeMirror 实例。

（ 的咖喱版本handleChange似乎有点奇怪，但是必要的，因为我正在使用的 CodeMirror 包装器和 React-Admin 的某些组合似乎正在丢失我的this引用，即使我使用了bind(this)。但我输入了正确设置的函数field，所以这有效.)

CodeMirror 的一切似乎都是正确的。我想我只需要知道如何使更改正确反映。

我不知道它是否相关，但我正在使用React CodeMirror Wrapper。

Answer 1

文档中对此进行了解释

您需要使用新值onChange从 redux-form 调用该函数。input这input是一个 propreact-admin 注入到你的组件中。

顺便读取值也是同样的道理。不要检查记录，因为它只是初始记录。使用input.value。

就像是：

const MyEditField = ({ input }) => (
    <CodeMirror 
        ref="CodeMirror" 
        value={beautify(input.value)} 
        onChange={val => input.onChange(val)} 
        options={{
            // Options
        }}
    />
)

export default addField(MyEditField)