reduxForm Safari 中的输入文件 returns 未定义

Question

我有一个包含输入类型文件的 reduxForm，selected 文件的 return 值未定义我的代码是：

  <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 中点击文件选择器没有显示，但拖放文件可以 select。

Answer 1

我觉得这是因为您在 onChange 处理程序内部调用 setState。将其提取到一个单独的函数中并绑定它或使用 class 属性，即

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

Answer 2

据我所知，是这样的：

1) 需要注意的是 Doesn't support the setting 的值，所以如果你想将值绑定回你需要的东西编写自定义 "selected files" 组件。

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) 以正常方式进行验证

reduxForm Safari 中的输入文件 returns 未定义

reduxForm Input file in safari returns an undefined

javascript

dropzone.js

reactjs

redux

redux-form