我在我的应用程序中使用react-redux表单标签。当我单击重置按钮时,它会重置除文件字段之外的所有字段。如何在单击重置按钮时重置文件字段?
<Form model="user" component={Forms} validators={{gender:{required:val=>required(val)},'': {passwordsMatch: (vals) => required(vals.confpwd) ? vals.pwd === vals.confpwd : true
}}} onSubmit={v =>this.handleSubmit(v)}>
<ReactBootstrap.FormGroup>
<ReactBootstrap.Col sm={3} componentClass={ReactBootstrap.ControlLabel} >
First Name
</ReactBootstrap.Col>
<ReactBootstrap.Col sm={9}>
<Control.text model=".fname" validators={{required,maxLength:maxLength(20)}} placeholder="First Name" component={ReduxFormControl} />
<Errors style={{color:"red"}} model=".fname" show="touched" messages={{required:'First Name required',maxLength:'must be 20 characters or less'}} />
</ReactBootstrap.Col>
</ReactBootstrap.FormGroup>
<ReactBootstrap.FormGroup>
<ReactBootstrap.Col sm={3} componentClass={ReactBootstrap.ControlLabel} >
Last Name
</ReactBootstrap.Col>
<ReactBootstrap.Col sm={9}>
<Control.text model=".lname" validators={{required,maxLength:maxLength(20)}} placeholder="Last Name" component={ReduxFormControl} />
<Errors style={{color:"red"}} model=".lname" show="touched" messages={{required:'Last Name required',maxLength:'must be 20 characters or less'}} />
</ReactBootstrap.Col>
</ReactBootstrap.FormGroup>
<ReactBootstrap.FormGroup>
<ReactBootstrap.Col sm={3} componentClass={ReactBootstrap.ControlLabel} >
Gender
</ReactBootstrap.Col>
<ReactBootstrap.Col sm={9}>
<ReactBootstrap.Row>
<ReactBootstrap.Col sm={2}>
<Control.radio model=".gender" value="male" />Male
</ReactBootstrap.Col>
<ReactBootstrap.Col sm={2}>
<Control.radio model=".gender" value="female" />Female
</ReactBootstrap.Col>
</ReactBootstrap.Row>
<Errors style={{color:"red"}} model=".gender" show="touched" messages={{required:'choose your gender'}} />
</ReactBootstrap.Col>
</ReactBootstrap.FormGroup>
<ReactBootstrap.FormGroup>
<ReactBootstrap.Col sm={3} componentClass={ReactBootstrap.ControlLabel} >
Age
</ReactBootstrap.Col>
<ReactBootstrap.Col sm={9}>
<Control.text model=".age" type="text" validators={{required,isNumber,minAge:(val) => required(val) && isNumber(val) ? val >=18 : true}} placeholder="Age" component={ReduxFormControl} />
<Errors style={{color:"red"}} model=".age" show="touched" messages={{required:'Age required',minAge:'must be atleast 18',isNumber:'must be a number', minAge: 'Sorry, you must be at least 18 years old'}} />
</ReactBootstrap.Col>
</ReactBootstrap.FormGroup>
<ReactBootstrap.FormGroup>
<ReactBootstrap.Col sm={3} componentClass={ReactBootstrap.ControlLabel} >
Email
</ReactBootstrap.Col>
<ReactBootstrap.Col sm={9}>
<Control.text model=".email" validators={{required,email:(val) => required(val) ? /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(val) : true}} placeholder="Email" component={ReduxFormControl} />
<Errors style={{color:"red"}} model=".email" show="touched" messages={{email: 'Please provide valid email address.',required:'Email id is Required'}} />
</ReactBootstrap.Col>
</ReactBootstrap.FormGroup>
<ReactBootstrap.FormGroup>
<ReactBootstrap.Col sm={3} componentClass={ReactBootstrap.ControlLabel} >
Password
</ReactBootstrap.Col>
<ReactBootstrap.Col sm={9}>
<Control.text type="password" model=".pwd" validators={{required}} placeholder="Password" component={ReduxFormControl} />
<Errors style={{color:"red"}} model=".pwd" show="touched" messages={{required:'Password required'}} />
</ReactBootstrap.Col>
</ReactBootstrap.FormGroup>
<ReactBootstrap.FormGroup>
<ReactBootstrap.Col sm={3} componentClass={ReactBootstrap.ControlLabel} >
Confirm Password
</ReactBootstrap.Col>
<ReactBootstrap.Col sm={9}>
<Control.text model=".confpwd" type="password" validators={{required}} placeholder="Confirm Password" component={ReduxFormControl} />
<Errors style={{color:"red"}} model=".confpwd" show="touched" messages={{required:'Confirm Password required'}} />
<Errors style={{color:"red"}} model="user" show="touched" messages={{passwordsMatch:'Password match'}} />
</ReactBootstrap.Col>
</ReactBootstrap.FormGroup>
<ReactBootstrap.FormGroup>
<ReactBootstrap.Col sm={3} componentClass={ReactBootstrap.ControlLabel} >
Status
</ReactBootstrap.Col>
<ReactBootstrap.Col sm={9}>
<Control.select model=".status" component={dropDown} validators={{required}}>
<option value="" disabled>choose an option</option>
<option value="Online">Online</option>
<option value="Away">Away</option>
<option value="InActive">Inactive</option>
</Control.select>
<Errors style={{color:"red"}} model=".status" show="touched" messages={{required:'Select status'}} />
</ReactBootstrap.Col>
</ReactBootstrap.FormGroup>
<ReactBootstrap.FormGroup>
<ReactBootstrap.Col sm={3} componentClass={ReactBootstrap.ControlLabel} >
Upload photo
</ReactBootstrap.Col>
<ReactBootstrap.Col sm={9}>
<Control.file model=".uploadContent" validators={{required}} component={ReduxFormControl} />
<Errors style={{color:"red"}} model=".uploadContent" show="touched" messages={{required:'upload your photo'}} />
</ReactBootstrap.Col>
</ReactBootstrap.FormGroup>
<ReactBootstrap.FormGroup>
<ReactBootstrap.Col sm={9} smOffset={3}>
<ReactBootstrap.Row>
<ReactBootstrap.Col sm={2}>
<label>Confirm </label>
</ReactBootstrap.Col>
<ReactBootstrap.Col sm={3}>
<Control.checkbox model=".confirmation" validators={{checkboxrequired}} />
</ReactBootstrap.Col>
</ReactBootstrap.Row>
<Errors style={{color:"red"}} model=".confirmation" show="touched" messages={{checkboxrequired:'please tic on the checkbox'}} />
</ReactBootstrap.Col>
</ReactBootstrap.FormGroup>
<ReactBootstrap.FormGroup>
<ReactBootstrap.Col sm={9} smOffset={3}>
<ReactBootstrap.Row >
<ReactBootstrap.Col sm={3}>
<ReactBootstrap.Button type="submit" bsStyle="info">Submit</ReactBootstrap.Button>
</ReactBootstrap.Col>
<ReactBootstrap.Col sm={3}>
<Control.reset
type="reset">reset</Control.reset>
</ReactBootstrap.Col>
</ReactBootstrap.Row >
</ReactBootstrap.Col>
</ReactBootstrap.FormGroup>
</Form>
在上面,当我点击重置按钮时,它会重置除文件字段之外的所有字段。如何在单击重置按钮时重置文件字段?