Question

我有一个redux-form，其中包含以下字段：

<Field name="image" label="Image" accept="image/*" fileChangeHandler={ this._fileChangeHandler.bind(this) } component={ renderFileInputField } />

  _fileChangeHandler = e => {
    let fileList = e.target.files;
    let { touched, error } = this.props;
    if (fileList instanceof FileList && fileList.length > 0 && touched && !error) {
      let reader = new FileReader();
      reader.onloadend = ({ target }) => {
        if (target.readyState === FileReader.DONE) {
          let imagePreview = <img src={ target.result } />;
          this.setState({
            imagePreview: imagePreview
          });
        }
      }
      reader.readAsDataURL(fileList[0]);
    } else {
      this.setState({
        imagePreview: <noscript/>
      });
    }
  }

这是渲染器功能：

export const renderFileInputField = function({ input, id, accept, label, fileChangeHandler, meta: { touched, error } }) {
  return renderField(<input {...input} id={id} type="file" onChange={ fileChangeHandler } accept={accept} value={null}/>
  , id, label, touched, error);
}
const renderField = function(input, id, label, touched, error) {
  return (
    <div>
      <label htmlFor={id}>{label}</label>
      <div>
        { input }
        { touched && error && <span>{error}</span> }
      </div>
    </div>
  );
}

我想知道：

如何在touched功能中访问error和_fileChangeHandler？
由于在onBlur上进行了redux验证，如何才能使其在onChange上运行？

Redux-form：验证文件输入的更改

0 个答案: