在 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 的 curried 版本似乎有点奇怪，但这是必要的，因为我正在使用的 CodeMirror 包装器和 React-Admin 的某些组合似乎失去了我的 this 参考，即使我使用了 bind(this)。但是我在正确设置field 的情况下输入了该函数，所以这行得通。）

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

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

Answer 1

这在documentation中有解释

您需要使用您的新值从 redux-form input 调用 onChange 函数。这个input 是一个 prop 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)