javascript - 如何通过补丁事件将值设置为 sanity.io 中自定义输入的任何字段？

Question

我想从自定义组件制作补丁事件并将值设置为文档中的另一个字段，但找不到有关补丁事件的文档。

只有没有字段说明的示例：

PatchEvent.from(set(value))

有人知道如何指定字段名称吗？

这个机会包含在文档中，但没有示例 https://www.sanity.io/docs/custom-input-widgets#patch-format-0b8645cc9559

标签： javascriptsanitysanity-checksanity-testing

Answer 1

我根本无法PatchEvent.from为自定义输入组件中的其他字段工作，但useDocumentOperation与withDocumentfrompart:@sanity/form-builder

这是一个使用自定义组件的粗略工作示例：

import React from "react";
import FormField from "part:@sanity/components/formfields/default";
import { withDocument } from "part:@sanity/form-builder";
import { useDocumentOperation } from "@sanity/react-hooks";
import PatchEvent, { set, unset } from "part:@sanity/form-builder/patch-event";

// tried .from(value, ["slug"])  and a million variations to upate the slug but to no avail
const createPatchFrom = (value) => {
  return PatchEvent.from(value === "" ? unset() : set(value));
};

const ref = React.createRef();

const RefInput = React.forwardRef((props, ref) => {
  const { onChange, document } = props;
  // drafts. cause an error so remove
  const {patch} = useDocumentOperation(
    document._id.replace("drafts.", ""), document._type)

  const setValue = (value) => {
    patch.execute([{set: {slug: value.toLowerCase().replace(/\s+/g, "-")}}])
    onChange(createPatchFrom(value));
    // OR call patch this way
    patch.execute([{set: {title: value}}])
  };

  return (
    <input
      value={document.title}
      ref={ref}
      onChange={(e) => setValue(e.target.value)}
    />
  );
});

class CustomInput extends React.Component {
  // this._input is called in HOC
  focus = () => {
    ref.current.focus();
  };
  render() {
    const { title } = this.props.type;
    return (
      <FormField label={title}>
        <RefInput ref={ref} {...this.props} />
      </FormField>
    );
  }
}
export default withDocument(CustomInput);