如何在react中编辑json文件

import React, { useState } from 'react';

const JsonEditor = () => {
  const [jsonData, setJsonData] = useState({
    name: '',
    age: '',
    email: ''
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setJsonData(prevData => ({
      ...prevData,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 在这里可以将jsonData保存到文件或发送到服务器
    console.log(jsonData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={jsonData.name}
          onChange={handleInputChange}
        />
      </label>
      <br />
      <label>
        Age:
        <input
          type="number"
          name="age"
          value={jsonData.age}
          onChange={handleInputChange}
        />
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={jsonData.email}
          onChange={handleInputChange}
        />
      </label>
      <br />
      <button type="submit">Save</button>
    </form>
  );
};

export default JsonEditor;