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格式onChange调用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)

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

1 个答案: