在 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

这在 documentation

中有解释

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

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

类似于：

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

export default addField(MyEditField)

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

Saving changes from a custom component in React-Admin

javascript

reactjs

react-codemirror

react-admin