如何在React-Admin中更新自定义组件的状态

Question

我有以下情况：使用react-admin基础结构，对于资源，我具有以下“编辑视图”：

import Editor from "react-simple-code-editor";

export const CodeQuestionEdit = props => (
  <Edit {...props}>
    <SimpleForm>
      <LongTextInput source="text" />
      <TextField label="Code Block" />
      <FormDataConsumer>
        {({ formData }) => (
          <Editor
            value={formData.codeBlock}
            onValueChange={code => {
              //Update the current edit form ....
            }}
            highlight={code =>
              highlight(code, languages.cs)
                .split("\n")
                .map(
                  line =>
                    `<span class="container_editor_line_number">${line}</span>`
                )
                .join("\n")
            }
            padding={10}
            className="container__editor"
          />
        )}
      </FormDataConsumer>
    </SimpleForm>
  </Edit>
);

编辑器组件不是react-admin的一部分，如何用用户输入的内容更新编辑器的状态？然后将此值传递回较高的组件，因此在保存时，我希望传入的是最后一个键入的值。

Answer 1

如果要将用户输入的值保存为状态并稍后使用它，则可以使用onChange属性。

您可以为您的组件实现的简单示例如下所示：

首先，您需要一个将输入值保存为状态的方法。

handleChange = (event) => {
   this.setState({ yourState: event.target.value });
};

然后您只需将onChange属性设置为输入。

并且由于您的组件包装在react-admin Edit中，所以保存过程应该是安全的。