为输入类型文件和材质ui按钮正确参数化事件处理程序

Question

I'm trying to build a form, which for a given set of options (stored in an array in component's state) gives you the possibility to upload a file and add a note for each option. The forms are custom, but the elements are from material UI.

The code looks something like this (simplified, stripped of other unneeded data).

public renderOptions() {
    const { mdFiles } = this.state
    return options.map((option, i) => 
        <FileUpload
            handleChange={(e) => {this.handleFileInputChange(e, i)}}
        />
        <TextField
            key={`option-${i}`}
            name={option.name} */
            type="text"
            fullWidth
            label={item}
            placeholder={`Edit ${item}`}
            value={option.note || option.originalNote}
            onChange={(e) => this.handleChangeFileName(e, i)}
         />

    )
}

I want to parametrize the event handlers, so that, besides the event, an index is passed, so I have a connection between the note and/or uploaded file and the option.

Changing the note works as expected, but the problem is in the FileUpload component.

It contains a simple input of type file , but the input is hidden and only the button is visible - example is taken from the official material ui docs ( https://material-ui.com/demos/buttons/ -> https://codesandbox.io/s/qzr18l41ow )

The code looks like this

class FileUpload extends React.Component<Props, {}> {
    public render() {
        return (
            <FileWrapper>
                <input
                    accept={fileType}
                    id="file-upload"
                    type="file"
                    onChange={handleChange}
                />
                <label htmlFor="file-upload" id="file-upload">
                    <Button
                        variant="contained"
                        component="span"
                    >
                        Upload
                    </Button>
                </label>
            </FileWrapper>
        )
    }
}

The problem is that in handleFileInputChange method the second argument (index) is always zero - so for whatever option I upload the file for - it is always attached to the first option. Now, when I strip the button (remove it) and just work with the input alone - everything works as expected. Seems the button and the label are disabling the proper connection with the passed event handler.

Does anyone have an idea how to fix this?

Answer 1

I found the problem...

Each file input has to have a unique id. In your code they all have id="file-upload". This is why all of the buttons trigger the onchange handler of the first input.

Here's a modified version where the ID set dynamically.

class FileUpload extends React.Component {
  render() {
    const { id, handleChange } = this.props;
    return (
      <div>
        <input id={id} type="file" onChange={handleChange} />
        <label htmlFor={id} id={`${id}`}>
          <Button variant="contained" component="span">
            Upload
          </Button>
        </label>
      </div>
    );
  }
}

Live example: