Question

我在以下组件中有一个输入文件类型字段。我进行了一些自定义更改默认样式。现在，如果我上传文件，它需要显示上传文件名而不是选择文件。现在，即使我上传了文件，它也只显示选择文件。

import React, { Component } from 'react';
import CsvParse from '@vtex/react-csv-parse';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

class fileUpload extends Component {

  render() {
    return (
      <div>
        <Typography className="biz-steps-head" gutterBottom>
          <span style={{color:"#000"}}> Upload Email List </span>
        </Typography>
        <Typography varient="p" className="ed-con-upload" gutterBottom>
            List emails in Column A of the spreadsheet. The first row will not be counted.
        </Typography>
        <div className="input-upload">
           <CsvParse
            keys={this.props.keys}
            onDataUploaded={this.props.handleData}
            onError={this.props.handleError}
            render={onChange => <input type="file" className="displayNone" id="contained-button-file" onChange={onChange} />}
        />
        <label htmlFor="contained-button-file">
           <span className="spanText">Choose File</span>
        </label>

        <Button variant="contained" className="upload-button" onClick={this.handleUpload}>
          Submit
        </Button>
           </div>
      </div>
    )
  }
}

export default fileUpload;

Answer 1

对于简单的解决方案，只需从文件输入字段中删除display:none CSS属性。

选择文件后，文件名未显示

1 个答案: