JsonTextArea

JsonTextArea 用来编辑 JSON 配置。它的 value / onChange 处理的是 JS 值，不是字符串。编辑时会实时解析，blur 时会格式化并触发 onChange。

基本用法

Parsed value: {"enabled":true,"retry":3}

import React, { useState } from 'react';
import { JsonTextArea } from '@nocobase/client-v2';
import { Space, Typography } from 'antd';

export default function JsonTextAreaDemo() {
  const [value, setValue] = useState<unknown>({ enabled: true, retry: 3 });

  return (
    <Space direction="vertical" style={{ width: 420 }}>
      <JsonTextArea value={value} onChange={setValue} rows={6} json5 />
      <Typography.Text type="secondary">
        Parsed value: {JSON.stringify(value)}
      </Typography.Text>
    </Space>
  );
}

在表单里使用：

import { JsonTextArea } from '@nocobase/client-v2';

<Form.Item name="customConfig" label={t('Custom config')}>
  <JsonTextArea rows={6} json5 />
</Form.Item>;

API

参数	类型	默认值	说明
`value`	`unknown`	-	JSON 对应的 JS 值
`onChange`	`(value: unknown) => void`	-	blur 且解析成功后触发
`space`	`number`	`2`	序列化缩进
`json5`	`boolean`	`false`	是否使用 JSON5 解析
`showError`	`boolean`	`true`	是否显示解析错误

其他参数继承 Antd Input.TextArea。

#JsonTextArea

#基本用法

#API

#相关链接

JsonTextArea

基本用法

API

相关链接