有誰知道如何使這個上傳的 img function 與舊版本的 reactJS 兼容？

Question

我不熟悉使用 reactJS（和一般的 JS）。 我正在嘗試向現有項目添加一個新的 function 但它不兼容，因為反應依賴項是 16.13.1 並且顯然不使用掛鈎。 它不接受項目版本中的 useState()。

function App() {
 const [file, setFile] = useState(); // storing the uploaded file
 function handleChange(e) { // function to handle the file upload
 console.log(e.target.files);
 setFile(URL.createObjectURL(e.target.files[0]));
  }

 return (
 <div className="App">
 <h2>Add Image:</h2>
 <input type="file" onChange={handleChange} />
 <img src={file} />

 </div>

  );
}

export default App;

我想讓它與那個依賴兼容，但我的嘗試還沒有成功。 有誰知道如何使其兼容或任何可以提供幫助的資源？ 對不起，如果這是一個明顯的問題，我還有很多東西要學！ 謝謝你！

到目前為止我已經嘗試過：

class uploadImage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            subMenuOpen: false,
            file: null 
        }
        this.handleChange = this.handleChange.bind(this)
    }
handleChange = (e) => {
        this.setState({
            file: URL.createObjectURL(e.target.files[0])
        })
    }
render () {
  return (
      <div className="App">
          <h2>Add Image:</h2>
          <input type="file" onChange={handleChange} />
          <img src={file} />

      </div>

  );
}}

Answer 1

也許您應該將 function 轉換為Class Component

嘗試將<img src={file} />更改為<img src={this.state.file} />

<input type="file" onChange={handleChange} />到<input type="file" onChange={this.handleChange} />