Question

我是新来的反应者。我的目标是让用户上载文件并将文件数据发送到服务器。我只希望用户上传csv文件，以便验证我编写了一个onChange函数来进行测试。但是当我运行它时，我收到一条错误消息：

无法编译。

./ src / pages / adddata / AddData.jsx
第13行：“ validateFile”不是   已定义no-undef
第13行：未定义'e'是no-undef

搜索关键字以详细了解每个错误。

下面显示的是我的代码：

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)

我在做什么错了？

Answer 1

将validateFile函数移至render函数之外，其他一切看起来都不错：）

Answer 2

请勿在{{1}}内创建处理函数，因为渲染会在组件生命周期中执行多次（每次状态更改时）。下面将解决问题

render()

onChange事件的触发功能未定义错误

2 个答案: