React :如何填充保存在本地存储中的数据？

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    
    // 从localStorage中获取保存的数据
    const localStorageData = localStorage.getItem('myData');

    this.state = {
      data: localStorageData ? JSON.parse(localStorageData) : ''
    };
  }

  componentDidMount() {
    // 填充数据到表单字段或展示组件
    // 例如：将数据填充到input字段中
    document.getElementById('myInput').value = this.state.data;
  }

  handleChange = (event) => {
    // 更新state中的数据
    this.setState({ data: event.target.value });
  }

  handleSave = () => {
    // 将更新后的数据保存回localStorage中
    localStorage.setItem('myData', JSON.stringify(this.state.data));
  }

  render() {
    return (
      <div>
        <input id="myInput" onChange={this.handleChange} />
        <button onClick={this.handleSave}>保存</button>
      </div>
    );
  }
}

export default MyComponent;