从本地文件夹动态更改React中的背景图像

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

function App() {
  const [backgroundImage, setBackgroundImage] = useState('');
  
  // 其他组件代码
  
  return (
    // JSX代码
  );
}

function handleFileChange(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  
  reader.onload = function(e) {
    setBackgroundImage(e.target.result);
  };
  
  reader.readAsDataURL(file);
}

return (
  <div className="App" style={{ backgroundImage: `url(${backgroundImage})` }}>
    <input type="file" onChange={handleFileChange} />
  </div>
);

.App {
  background-size: cover;
  background-position: center;
  /* 其他样式 */
}