如何在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中，因此保存过程应该是安全的。