React JSON Editor AJRM - 设置初始值及显示

在 React JSON Editor AJRM 中设置初始值，你需要将初始值传递给'JSONInput'组件的'placeholder'属性。

以下是一个示例代码，演示如何设置初始值：

import React, { useState } from 'react';
import { JSONInput } from 'react-json-editor-ajrm';
import locale from 'react-json-editor-ajrm/locale/en';

const App = () => {
  const [jsonData, setJsonData] = useState({
    // 初始值
    name: 'John Doe',
    age: 25,
    email: 'johndoe@example.com'
  });

  const handleOnChange = (jsonData) => {
    setJsonData(jsonData);
  };

  return (
    <div>
      <JSONInput
        id='json-editor'
        placeholder={jsonData} // 设置初始值
        locale={locale}
        onChange={handleOnChange}
      />
    </div>
  );
};

export default App;

在上面的示例中，我们使用'useState'钩子来定义一个名为'jsonData'的状态变量，并将初始值作为对象传递给它。然后，我们将'jsonData'作为'placeholder'属性传递给'JSONInput'组件。

这样，当'JSONInput'组件首次渲染时，它将显示传递的初始值。