Я создаю простой компонент React. Он имеет кнопку Upload
, которая загружает файл. Я не могу заставить onSumbit
выстрелить в моем текущем коде:
import React from 'react';
import PropTypes from 'prop-types';
import Typography from '@material-ui/core/es/Typography/Typography';
import Button from '@material-ui/core/es/Button/Button';
import { UploadCSVstyles } from '../styles/Material-UI/muiStyles.js';
import withStyles from '@material-ui/core/es/styles/withStyles';
import * as log from 'loglevel';
log.setLevel("debug");
class UploadCSV extends React.Component {
state = {
uploadedFile: null
}
onSubmit = e => {
e.preventDefault();
log.debug('from submit');
this.setState({
uploadedFile: e.target.files[0]
});
}
onChange = e => {
log.debug('from change');
this.setState({
uploadedFile: e.target.files[0]
});
}
render() {
const { classes } = this.props;
return (
<div>
<Typography>
You can upload a CSV file containing app id's in one columns.
</Typography>
<input
accept="text/csv"
className={classes.input}
id="contained-button-file"
multiple
type="file"
onChange={this.onChange}
/>
<label htmlFor="contained-button-file">
<Button variant="contained" component="span" className={classes.button}>
Choose files
</Button>
</label>
<form onSubmit={this.onSubmit}>
<Button variant="contained" component="span" className={classes.button}
type="submit">
Upload
</Button>
</form>
</div>
);
}
}
UploadCSV.propTypes = {
classes: PropTypes.object.isRequired
};
export default UploadCSV;
Проблема, я думаю, с кнопкой Material-UI, потому что она как-то не срабатывает onSubmit
.
Как заставить событие onSubmit
работать с Material-UI Button
?