Question

使用Redux 6.0.5。我有一个'file'输入类型的渲染字段组件，我在该文件组件中有一个onChange事件，它获取上传的文件名，我稍后会显示它。

我在错误验证功能方面遇到问题，重现的步骤：

点击上传按钮，触发SYNC验证（由于此时没有文件，设置了'强制错误消息'）
然后在上传文件onChange事件时，我获取上传的文件名并将其保存在我的状态
自选择文件

const labels = defineMessages({
      mandatoryField: {
        id: 'bo_setting_mandatory_field',
        defaultMessage: `This is Mandatory Field`
    }
});
const validate = values => {
    const errors = {};
    const coverPicture = values.get('coverPicture');
    if (!coverPicture)
        errors.coverPicture = labels.mandatoryField;
     return errors;
}

const RenderFileUploadField = ({ input, placeholder, label, buttonLabel, type, meta: { touched, error }, onChange, accept}) => {
    const isError = touched && error;
    return <div className={isError ? 'form-group has-error' : 'form-group'}>
        <label className="control-label">{label}</label>
        <div className="inputGroup">
            <input className="form-control" {...input} type={type} accept={accept} onChange={onChange} />
            <div className="inputFile">
                <small></small>
                <input readOnly={true} name={`${input.name}Text`} type="text" value={placeholder} className="form-control" />
                <span className={isError ? 'error active text-danger' : 'error'}>
                    {isError ? <FormattedMessage id={error.id} defaultMessage={error.defaultMessage} className={isError ? 'error active' : 'error'} />
                        : null}
                </span>
                <span className="inputAddon"><span>{buttonLabel}</span></span>
            </div>
        </div>
    </div>
}

class From extends Component {
    handleSubmit(data) {
        console.log("SUBMITTED")
        console.log(data.toJS())
    }
    handleFile(fieldName, event) {
        const { fields } = this.props;
        const files = [...event.target.files];
        if (files.length > 0) {
            this.props.uploadFile(fieldName, files[0].name)
        }
        else if (files.length === 0) {
            this.props.uploadFile(fieldName, '')
        }
        event.preventDefault();
    }
    render() {
        const {formatMessage} = this.props.intl;
        const { handleSubmit, pristine, submitting, error, reset } = this.props;

        return (
                               <form className="equalColumn">
 <Field name="coverPicture" type="file" onChange={this.handleFile.bind(this, 'coverPicture')}
                                        label={formatMessage(labels.defaultCoverPic)}
                                        component={RenderFileUploadField}
                                        buttonLabel={formatMessage(labels.uploadFile)}
                                        placeholder={coverPicture ? coverPicture : formatMessage(labels.defaultCoverPic)}
                                        accept='image/*'
                                        value={null} />
                                        <a href="#" className="btn btn-success" onClick={handleSubmit(this.handleSubmit.bind(this))} >{formatMessage(labels.saveTheFrom)}</a>
                    </form>


        );
    }

}

From.propTypes = {
    intl: intlShape.isRequired
};


function mapStateToProps(state) {
    return {
        }
}

const injectIntlDecorator = _.curryRight(injectIntl)
export default compose(injectIntlDecorator(),
    reduxForm({
        form: 'settings',
        destroyOnUnmount: false, 
        validate
    }),
    connect(
        mapStateToProps,
        actions,
        null,
        { pure: false }
    )
)(From);

简而言之：似乎是onClick上传按钮'OnBlur enter image description here'验证在选择文件之前触发，并且在文件更改后未触发验证... 有人可以帮我吗？

Redux-from'file input field'在选择文件之前触发验证触发器

0 个答案: