3

如何将自定义组件的输出保存回 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 实例来运行我需要的任何代码。

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

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

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

4

1 回答 1

5

这在文档中进行了解释

您需要使用新值onChange从 redux-form 调用该函数。input这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)
于 2019-06-04T13:09:54.130 回答