🧐[问题] 自定义表单项中如何获取阅读态

[africa1207]

🧐 问题描述

目前自定义一个表单项，获取不到是否是readonly，手动添加readonly到组件上，但是如何获取到value 的值来分别渲染？
在customInput.tsx中直接获取不到value和readonly，文档中写自定义表单项遵循

• 提供受控属性 value 或其它与 valuePropName 的值同名的属性。
• 提供 onChange 事件或 trigger 的值同名的事件。
  就算我手动在调用<CustomInput readonly={readonly}>获取到readonly了，也没法获取到value，使用了Form.useForm，提示Instance created by useFormis not connected to any Form element. Forget to passform prop?

💻 示例代码

index.tsx

import {
  ProForm,
  ProFormText,
  ProFormInstance
} from "@ant-design/pro-components";
import { Switch } from "antd";
import React, { useRef, useState } from "react";
import CustomInput from "./CustomInput";

export default function () {
  const [readonly, setReadonly] = useState(false);
  const formRef = useRef<ProFormInstance>();
  function setValue() {
    formRef.current?.setFieldsValue({
      username: "abc",
      customInput: "def"
    });
  }

  return (
    <div>
      <button onClick={setValue}>click</button>
      <Switch
        style={{
          marginBlockEnd: 16
        }}
        checked={readonly}
        checkedChildren="编辑"
        unCheckedChildren="只读"
        onChange={setReadonly}
      />
      ;
      <ProForm
        formRef={formRef}
        readonly={readonly}
        onFinish={async (values) => {
          console.log(values);
        }}>
        <ProFormText name="username" label="姓名" />
        <CustomInput name="customInput" label="自定义" />
      </ProForm>
    </div>
  );
}

customInput.tsx

import { Input, Form } from "antd";
import { useMemo } from "react";

export default function (props) {
  const { value = "", onChange, readonly, ...rest } = props;
  console.log("props:", props);
  const form = Form.useForm();
  const _value = useMemo(() => form[0].getFieldValue(props.name), [value]);

  return readonly ? (
    <Form.Item {...rest}>
      <div>{_value}</div>
    </Form.Item>
  ) : (
    <Form.Item {...rest}>
      <Input value={value} onChange={onChange} {...rest} />
    </Form.Item>
  );
}

🚑 其他信息

[africa1207]

在customInput.tsx中使用Form.useFormInstance()可以获得当前表单项的value值，但是如何获取readonly？必须手动这样添加吗？

<ProForm
        formRef={formRef}
        readonly={readonly}
        onFinish={async (values) => {
          console.log(values);
        }}>
        <ProFormText name="username" label="姓名" />
        <CustomInput name="customInput" label="自定义" readOnly={readonly} />
      </ProForm>

export default function (props) {
  const { value = "", onChange, readOnly = false, name, ...rest } = props;
  const form = Form.useFormInstance();
  const _value = useMemo(() => {
    return form.getFieldValue(props.name);
  }, [value, readOnly]);
  return readOnly ? (
    <Form.Item {...rest}>
      <div>{_value}</div>
    </Form.Item>
  ) : (
    <Form.Item {...rest}>
      <Input value={value} onChange={onChange} {...rest} />
    </Form.Item>
  );
}

能否在表单项中使用某个hook来获取ProForm中的这些props？

[natashaamin]

在 customInput 用 ProForm.Item 吧。 ProForm是ProComponent的

[africa1207]

在 customInput 用 ProForm.Item 吧。 ProForm是ProComponent的

customInput 中如果使用ProForm.Item，外部执行

 function setValue() {
    formRef.current?.setFieldsValue({
      username: "abc",
      customInput: "def"
    });
  }

不会设置值，而且在input中输入没反应，所以我改成Form.Item

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns.
此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

抱歉，我之前给出的建议有误。在 customInput 中应该使用 antd 的 Form.Item，而不是 ProForm.Item。另外，关于获取 readonly 的值，你可以使用 react 的 useState 来维护该状态。

修改后的代码如下：

import { Input, Form } from "antd";
import { useMemo } from "react";

export default function CustomInput(props) {
  const { value = "", onChange, name, ...rest } = props;
  const [readOnly, setReadOnly] = useState(false);
  const form = Form.useFormInstance();
  const _value = useMemo(() => {
    return form.getFieldValue(name);
  }, [value, name]);

  const handleReadOnlyChange = (e) => {
    setReadOnly(e.target.checked);
  };

  return (
    <Form.Item {...rest} label={props.label}>
      {readOnly ? (
        <div>{_value}</div>
      ) : (
        <Input value={value} onChange={onChange} {...rest} />
      )}
      <input
        type="checkbox"
        checked={readOnly}
        onChange={handleReadOnlyChange}
      />
      readonly
    </Form.Item>
  );
}

这里我们使用 useState 来维护 readOnly 的状态，并在 Form.Item 中添加一个复选框来切换状态。当复选框选中时，readOnly 会为 true，展示 _value 的值，否则展示一个可编辑的输入框。

请注意，上述代码只提供了切换 readonly 状态的功能，你可以根据实际需求进行相应的调整。希望这可以帮到你！如果有任何问题，请随时问我。

[taoliujun]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns.
此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

抱歉，我之前给出的建议有误。在 customInput 中应该使用 antd 的 Form.Item，而不是 ProForm.Item。另外，关于获取 readonly 的值，你可以使用 react 的 useState 来维护该状态。

修改后的代码如下：

import { Input, Form } from "antd";
import { useMemo } from "react";

export default function CustomInput(props) {
  const { value = "", onChange, name, ...rest } = props;
  const [readOnly, setReadOnly] = useState(false);
  const form = Form.useFormInstance();
  const _value = useMemo(() => {
    return form.getFieldValue(name);
  }, [value, name]);

  const handleReadOnlyChange = (e) => {
    setReadOnly(e.target.checked);
  };

  return (
    <Form.Item {...rest} label={props.label}>
      {readOnly ? (
        <div>{_value}</div>
      ) : (
        <Input value={value} onChange={onChange} {...rest} />
      )}
      <input
        type="checkbox"
        checked={readOnly}
        onChange={handleReadOnlyChange}
      />
      readonly
    </Form.Item>
  );
}

这里我们使用 useState 来维护 readOnly 的状态，并在 Form.Item 中添加一个复选框来切换状态。当复选框选中时，readOnly 会为 true，展示 _value 的值，否则展示一个可编辑的输入框。

请注意，上述代码只提供了切换 readonly 状态的功能，你可以根据实际需求进行相应的调整。希望这可以帮到你！如果有任何问题，请随时问我。

机器人滚远点吧，真的是。

[qq508852582]

looks nobody cares this issue.

import { EditOrReadOnlyContext } from "@ant-design/pro-form/es/BaseForm/EditOrReadOnlyContext"
const COMP = ()=>{

    const modeContext: 'edit'| 'read' = useContext(EditOrReadOnlyContext);
    console.log(modeContext)

    return (....)
}

[taoliujun]

• 这样能获取到readonly
• f.getFieldValue()能获取到value

在你获取不到value的错误中，可能是组件没放在Form/ProForm的上下文内部？