如何使用自定义按钮在reactjs中读取和上传文件

Question

我想在本地上传和读取文件，但是我想使用自定义按钮而不使用HTML输入。

<input type="file" id="my_file_input" />

我找到了这种方式，但是我不想使用这种形状或按钮，我想使用材质UI凸起按钮来实现此功能，以与其他站点按钮匹配。

我也尝试了以下方法，但是没有用，因为当我单击按钮时什么也没发生。

<input type="file" id="my_file_input" style={{display:"none"}}/>
<label htmlFor="my_file_input">
    <RaisedButton
        label="Import from Excel"
        labelColor="#FFFFFF"
        backgroundColor="#01579b"
        />
</label>

我认为我应该在onClick的{​​{1}}功能中手动执行上传/读取文件功能，但是我没有找到一种方法。

那么在反应中还有其他解决方案吗？

Answer 1

我希望这段代码对您有所帮助。 我们可以通过两种方式解决它。

1-）

HTML

<div>
<input type="file" hidden ref={this.inputReference} onChange={this.fileUploadInputChange} />
<button className="ui button" onClick={this.fileUploadAction}>
    Image Upload
</button>
{this.state.fileUploadState}
</div>

反应建设者

constructor(props) {
    super(props);
    this.state={fileUploadState:""}
    this.inputReference = React.createRef();
}

点击功能

fileUploadAction = () =>this.inputReference.current.click();
fileUploadInputChange = (e) =>this.setState({fileUploadState:e.target.value});

2-）

HTML

<div>
<input id="fileButton" type="file" hidden />
<button onClick={this.fileUploadButton}>
    Image Upload
</button>
{this.state.fileUploadState}
</div>

反应状态

this.state = {fileUploadState:""}

反应功能

fileUploadButton = () => {
document.getElementById('fileButton').click();
document.getElementById('fileButton').onchange = () =>{      
this.setState({
    fileUploadState:document.getElementById('fileButton').value
        });
    }
}

Answer 2

请阅读React Material https://material-ui.com/demos/buttons/的API

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const styles = theme => ({
  button: {
    margin: theme.spacing.unit,
  },
  input: {
    display: 'none',
  },
});

function ContainedButtons(props) {
  const { classes } = props;
  return (
    <div>
      <input
        accept="image/*"
        className={classes.input}
        id="contained-button-file"
        multiple
        type="file"
      />
      <label htmlFor="contained-button-file">
        <Button variant="raised" component="span" className={classes.button}>
          Upload
        </Button>
      </label>
    </div>
  );
}

ContainedButtons.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ContainedButtons);

Answer 3

我想提供一个更新以将 refs 与功能组件一起使用。这是一个简单的例子：

Import React, {useRef} from 'React'

const myComponent = () => {
  const fileInputRef=useRef();
  
  const handleChange(event) = () =>{
    // do something with event data

  }
  
  return(
    <>
      <button onClick={()=>fileInputRef.current.click()}>
        Custom File Input Button
      </button>
      <input onChange={handleChange} multiple='false'   type='file'hidden/>
    </>
  )
}

Answer 4

如文档所述，您只需添加：

component="span"

到按钮组件。