Question

最近，我编写了React JS应用程序以从外部导入图像并处理该图像。为了处理用户onChange事件，我使用onChange运行我的函数handleChange，但第二次将无法运行。如何正确处理onChange事件？这是我的代码

         <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

尝试这个

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

希望它能工作！

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

1 个答案: