React/JSX -如何编写一个可编辑的输入，通过props提供的初始内容在提交时只更新其父内容？

import React, { useState } from 'react';

const EditableInput = ({ initialValue, onSubmit }) => {
  const [value, setValue] = useState(initialValue);
  
  const handleChange = (event) => {
    setValue(event.target.value);
  };
  
  const handleSubmit = () => {
    onSubmit(value);
  };
  
  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <button onClick={handleSubmit}>提交</button>
    </div>
  );
};

export default EditableInput;

import React, { useState } from 'react';
import EditableInput from './EditableInput';

const ParentComponent = () => {
  const [content, setContent] = useState('');
  
  const handleInputSubmit = (value) => {
    setContent(value);
  };
  
  return (
    <div>
      <EditableInput initialValue={content} onSubmit={handleInputSubmit} />
      <p>父组件内容：{content}</p>
    </div>
  );
};

export default ParentComponent;