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包装的，因此保存过程应该是安全的。

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

1 个答案: