javascript - 处理程序引用始终返回到第一个渲染组件

Question

我有一个 React 组件，其中有一个 SingleFileUpload 组件的实例，该组件用于为每个组件上传不同类型的文件。

  <SingleFileUpload 
           keyProp={"standardFileName"}
           title={"Standard File"}
           buttonText={"Upload Standard file"}
           isSingleFile={false} 
           handleFile={this.onChangeHandler} 
           submitSuccess={submitSuccess} 
           name={standardFileName} 
           deleteFileHandler={this.deleteStandardFileHandler}
           file={standardFile}/>
          < br/>
          <SingleFileUpload 
          keyProp={"entitlementFileName"}
          title={"Entitlement File"}
          buttonText={"Upload Entitlement file"}
          isSingleFile={false}
          handleFile={this.onChangeHandler} 
          submitSuccess={submitSuccess} 
          name={entitlementFileName} 
          deleteFileHandler={this.deleteEntitlementFileHandler}
          file={entitlementFile}/>

其中每一个都与通用处理程序一起使用来设置实际文件，以及文件的名称

onChangeHandler = (e, keyProp) =>{
console.log('keyprop is', keyProp)
e.preventDefault()
const file = keyProp.split('Name')[0];
const fileName = keyProp;
if(e.target.files[0].name.split('.')[1] !== 'xlsx'){
  return alert('Please only upload Excel files')
 }
  this.setState({
    [file]: e.target.files[0],
    [fileName]: e.target.files[0].name
  }, () => console.log(this.state))
};

问题是，每当在任何 SingleFileUpload 中使用回调时，它总是传递第一个渲染组件的 props

  /*inside SingleFileUpload */
    <Button variant="contained" component="span" className={"button"} onChange=
{(e) => {handleFile(e, keyProp), console.log('handler called with ', keyProp  /* this always logs whatever prpops are passed to the first component */)}} style={{margin: '10px'}}>
           <input
           style={{display: 'none'}}
       accept=".xlsx"
       className={"input"}
       id="contained-button-file"
       type="file"
        />

Answer 1

问题是您对文件输入使用相同的 id (id="contained-button-file")