react textarea json format

如果您想在 React 中实现一个文本框（Textarea），并使其支持 JSON 格式化，您可以使用 JSON.stringify 和 JSON.parse 方法来实现。以下是一个简单的代码示例：

首先，您需要在 React 组件中定义一个 state，用于存储用户输入的 JSON 数据。

import React, { useState } from "react";
function MyTextarea() {
  const [jsonValue, setJsonValue] = useState("");
  // 在这里定义一个handleChange函数，用于监听文本框的变化，并更新state
  const handleChange = (event) => {
    setJsonValue(event.target.value);
  return (
      <textarea value={jsonValue} onChange={handleChange} />
    </div>
接下来，在处理用户输入之前，我们需要先确保输入的字符串是一个合法的 JSON 字符串。我们可以使用 JSON.parse 方法将其转换为 JavaScript 对象。
import React, { useState } from "react";
function MyTextarea() {
  const [jsonValue, setJsonValue] = useState("");
  const handleChange = (event) => {
    // 首先，将用户输入的 JSON 字符串转换为 JavaScript 对象
    let parsedJson;
    try {
      parsedJson = JSON.parse(event.target.value);
    } catch (error) {
      console.error("Invalid JSON string: ", error.message);
      return;
    // 然后，将 JavaScript 对象转换为格式化的 JSON 字符串
    const formattedJson = JSON.stringify(parsedJson, null, 2);
    // 最后，更新state
    setJsonValue(formattedJson);
  return (
      <textarea value={jsonValue} onChange={handleChange} />
    </div>
在这个代码示例中，我们首先使用 try-catch 语句捕获可能的 JSON 解析错误。如果用户输入的字符串无法解析为一个合法的 JSON 字符串，我们会打印一个错误信息并返回。否则，我们使用 JSON.stringify 方法将 JavaScript 对象转换为格式化的 JSON 字符串，并将其更新到 state 中。
希望这个代码示例能够帮助您实现一个支持 JSON 格式化的文本框！