Safari 中的 reduxForm 输入文件返回未定义

Question

我有一个包含输入类型文件的reduxForm，所选文件的返回值未定义我的代码是：

  <Field
     label="Select a File"
     name="file"
     component={this.renderFileField}/>

而renderFileField函数是：

  renderFileField( field ){

return(

      <div>
        <label className="label">{field.label}</label>
        <label htmlFor="file" className="input input-file">
          <div className="button mystyle-btn-u">
            <input type="file" id="file" {...field.input}
            value={null}
            onChange={(e)=>
              {
                field.onChangeExtra();
                //remove fakepath string from file name that would display in input
              ReactDOM.findDOMNode(e.target).parentNode.nextSibling.value = e.target.value.replace(/.*fakepath\\/,"");
                //fileName value would set with file name user selected from file picker
              this.setState({fileName:e.target.value.replace(/.*fakepath\\/,"")})}}
            ></input>
            Browse
          </div>
          <input
          value={this.state.fileName}
           type="text" onChange={this.ChangeFileName.bind(this)}/>
        </label>
      </div>
    );
}

我也尝试过 Dropzone 输入文件，但在 Safari 中点击文件选择器未显示，但可以选择拖放文件。

Answer 1

我觉得这来自于您从 onChange 处理程序内部调用 setState。将其提取到单独的函数中并绑定它或使用类属性，即

onChange = () => {
    ...
};

Answer 2

据我所知，是这样的：

1) 需要注意的是不支持该设置 的值，所以如果你想将值绑定回你需要的东西 编写一个自定义的“选定文件”组件。

2) 在调用 fields.yourField.handleChange() 之前，您需要对事件进行一些解析。像这样的：

<input
  type="file"
  onChange={
    ( e ) => {      
      e.preventDefault();
      const { fields } = this.props;
      // convert files to an array
      const files = [ ...e.target.files ];
      fields.yourField.handleChange(files);
    }
  }
/>

3) 以正常方式进行验证