Reactjs onChange事件的触发函数未定义错误

我是新来的。我的目标是让用户上传文件并将文件数据发送到服务器。我只希望用户上传csv文件，以便验证我是否编写了一个onChange fnction进行测试。但是，当我运行此命令时，会出现一个错误，即：

未能编译

./src/pages/adddata/adddata.jsx
第13行：“validateFile”不可用 未定义未定义
第13行：“e”未定义未定义

搜索关键字以了解有关每个错误的更多信息

下面是我的代码：

import {withStyles} from '@material-ui/core'
import PropTypes    from 'prop-types'
import * as React   from 'react'
import styles       from './AddData.styles'
import axios from 'axios'

class AddData extends React.Component {

  render() {

    const {classes} = this.props

    validateFile(e)
    {
      // let file= e.target.file;
      console.log("d")
    }

    return (
        <div className={classes.container}>
        <form onSubmit={this.handleSubmit}>
          <label>Name:</label> 
          <input type="text" name="dataset_name" className={classes.text} placeholder="Enter dataset name"></input><br/>
            <label>Type:</label>  
          <select name="data_format" className={classes.text}>
            <option value="null">Select Type of File</option>
            <option value="csv">CSV</option>
          </select><br/>
          <label>Select file: </label>          
          <input type="file" name="dataset_csv" className={classes.browse} onChange={this.validateFile.bind(this)}></input><br/>
            <input type="submit" value="Submit" className={classes.submit}></input>
        </form>
        </div>
    )
  }

}

AddData.propTypes = {
  classes: PropTypes.object.isRequired,
  theme  : PropTypes.object.isRequired,
}

export default withStyles(styles, {withTheme: true})(AddData)

从'@material ui/core'导入{withStyles}
从“道具类型”导入道具类型
从“React”导入*作为React
从“./AddData.styles”导入样式
从“axios”导入axios
类AddData扩展了React.Component{
render（）{
const{classes}=this.props
验证文件（e）
{
//让file=e.target.file；
控制台日志（“d”）
}
返回(
姓名：


类型：
选择文件类型
CSV


选择文件：


)
}
}
AddData.propTypes={
类：PropTypes.object.isRequired，
主题：PropTypes.object.isRequired，
}
使用样式导出默认值（样式，{withTheme:true}）（添加数据）

---

我做错了什么？

将

validateFile

函数移到

render

函数外，其他一切看起来都很好：）

将

validateFile

函数移到

render

函数外，其他一切看起来都很好：）

不要在

render（）内创建处理函数

as render在组件生命周期中执行多次（每次状态更改时）。下面将解决这个问题

class AddData extends React.Component {

  validateFile(e)
  {
      // let file= e.target.file;
    console.log("d")
  }

  render() {

    const {classes} = this.props

    return (
        <div className={classes.container}>
        <form onSubmit={this.handleSubmit}>
          <label>Name:</label> 
          <input type="text" name="dataset_name" className={classes.text} placeholder="Enter dataset name"></input><br/>
            <label>Type:</label>  
          <select name="data_format" className={classes.text}>
            <option value="null">Select Type of File</option>
            <option value="csv">CSV</option>
          </select><br/>
          <label>Select file: </label>          
          <input type="file" name="dataset_csv" className={classes.browse} onChange={this.validateFile.bind(this)}></input><br/>
            <input type="submit" value="Submit" className={classes.submit}></input>
        </form>
        </div>
    )
  }

}

class AddData扩展React.Component{
验证文件（e）
{
//让file=e.target.file；
控制台日志（“d”）
}
render（）{
const{classes}=this.props
返回(
姓名：


类型：
选择文件类型
CSV


选择文件：


)
}
}

不要在

render（）中创建处理程序函数，因为render在组件生命周期中执行多次（每次状态更改）。下面将解决这个问题

class AddData extends React.Component {

  validateFile(e)
  {
      // let file= e.target.file;
    console.log("d")
  }

  render() {

    const {classes} = this.props

    return (
        <div className={classes.container}>
        <form onSubmit={this.handleSubmit}>
          <label>Name:</label> 
          <input type="text" name="dataset_name" className={classes.text} placeholder="Enter dataset name"></input><br/>
            <label>Type:</label>  
          <select name="data_format" className={classes.text}>
            <option value="null">Select Type of File</option>
            <option value="csv">CSV</option>
          </select><br/>
          <label>Select file: </label>          
          <input type="file" name="dataset_csv" className={classes.browse} onChange={this.validateFile.bind(this)}></input><br/>
            <input type="submit" value="Submit" className={classes.submit}></input>
        </form>
        </div>
    )
  }

}

class AddData扩展React.Component{
验证文件（e）
{
//让file=e.target.file；
控制台日志（“d”）
}
render（）{
const{classes}=this.props
返回(
姓名：


类型：
选择文件类型
CSV


选择文件：


)
}
}