反应：输入 onChange 不会触发第二次，第一次工作

Question

Recently I write my React JS app to import images from outside and process that image. In order to handle the user onChange event, I use onChange to run my function handleChange , but it won't work for the second time. How can I handle the onChange event properly? Here is my code

         <div className={classes.fileUpload}>
            <div
              style={{
                position: "relative",
                display: "inline-block",
                height: "100%",
                width: "100%",
              }}
            >
              <input
                type={"file"}
                id="file"
                accept={"image/png, image/jpeg"}
                style={{ display: "none" }}
                onChange={(e) => handleChange(e.target.files)}
              />
              <label htmlFor="file" className={classes.labelFile}>
                <PublishIcon style={{ marginRight: "10px" }} />
                Upload file
              </label>
            </div>
          </div>

Answer 1

try this one

import React from 'react'

class SimpleReactFileUpload extends React.Component {

  constructor(props) {
    super(props);
    this.state ={
      file:null
    }
  
    this.onChange = this.onChange.bind(this)
  }

  onChange(e) {
    this.setState({file:e.target.files[0]})
  }


  render() {
    return (
      <form onSubmit={this.onFormSubmit}>
        <h1>File Upload</h1>
        <input type="file" onChange={this.onChange} />
        
      </form>
   )
  }
}



export default SimpleReactFileUpload

hope it will work!