Javascript 反应区+；Redux表单验证不需要'；行不通

我正在使用React Dropzone向Redux表单添加文件输入。调用验证函数并返回正确的错误，但是

error

和

tocuhed

的值不会更改：

字段渲染方法：

export const renderDropzoneField = function({ input, name, id, meta: { touched, error } }) {
  return (
    <div>
      <Dropzone
        name={name}
        onDrop={filesToUpload => input.onChange(filesToUpload)}
      >
        Import image to upload
        {touched && error && <span>{error}</span>}
      </Dropzone>
    </div>
  );
}

render() {
  const { handleSubmit } = this.props;
  return (
    <div>
      <form onSubmit={handleSubmit(this._onSubmit.bind(this))}>
        <Field name="title" label="Name" type="text" component={renderInputField}/>
        <Field name="description" label="Description" type="text" component={renderTextAreaField}/>
        <Field name="amount" label="Amount" type="text" component={renderInputField}/>
        <Field name="image" component={renderDropzoneField}/>
        <button type="submit" className="btn btn-primary">Create</button>
        <button type="button" className="btn btn-primary" onClick={this.props.onClose}>Cancel</button>
      </form>
      { this.state.error ? <span>{this.state.error}</span> : <noscript/> }
    </div>
  );
}

渲染方法：

export const renderDropzoneField = function({ input, name, id, meta: { touched, error } }) {
  return (
    <div>
      <Dropzone
        name={name}
        onDrop={filesToUpload => input.onChange(filesToUpload)}
      >
        Import image to upload
        {touched && error && <span>{error}</span>}
      </Dropzone>
    </div>
  );
}

render() {
  const { handleSubmit } = this.props;
  return (
    <div>
      <form onSubmit={handleSubmit(this._onSubmit.bind(this))}>
        <Field name="title" label="Name" type="text" component={renderInputField}/>
        <Field name="description" label="Description" type="text" component={renderTextAreaField}/>
        <Field name="amount" label="Amount" type="text" component={renderInputField}/>
        <Field name="image" component={renderDropzoneField}/>
        <button type="submit" className="btn btn-primary">Create</button>
        <button type="button" className="btn btn-primary" onClick={this.props.onClose}>Cancel</button>
      </form>
      { this.state.error ? <span>{this.state.error}</span> : <noscript/> }
    </div>
  );
}

---

您是否在提交表单时阻止默认操作发生？如果没有，页面将刷新并清除触摸和错误状态

在

handleSubmit（event）

中，您应该包括以下行：

event.preventDefault（）

这将防止在单击提交时刷新页面。
您的代码不清楚如何触发验证（是提交还是字段级？）。无论如何，我组装了一个沙箱，它可以工作。
我所做的是向字段中添加验证属性

<Field validate={validateImage} name="image" component={renderDropzoneField} />

这甚至在提交之前就发生了。我希望验证结果（可能的错误消息）会更新
toucted
和
error
，但这不会发生。（对于其他简单的html输入类型，如
textarea
，或
input
）使用
meta.dirty
而不是
toucted
怎么样？默认情况下，当字段模糊时，将设置触摸的
meta.toucted
；在您的情况下，您没有模糊dropzone，只是更改了它的值，因此
meta.dirty
应该是您需要的道具。那么
error
呢？看看这个示例是否有帮助？我以前试过，这是错误的。我在做形式层面的工作。你的例子和我遇到的问题一样。尝试上载视频文件（无效的文件格式），但仍然可以看到预览值。如何将预览限制为仅针对有效输入显示？这是否意味着您希望在输入无效时重置该值？如果是，你为什么需要这个？我这样问是因为如果表单未通过验证，则无法提交表单，因此您可能不需要重置无效值。我想如果你能多发几行代码，比如验证是如何完成的，那会很有用。啊，我还有一个问题。这工作正常，但是缺少了一些东西，照片预览显示。我用预览显示更新了我的沙盒，你可以检查它。仍然存在问题。即使验证没有通过，我们仍将在添加到
字段的
onChange
处理程序中获取它。
{dirty &&(error && <span>{error}</span>)}