如何在react-redux中重置文件输入

问题描述 投票:0回答:0

我在应用程序中使用react-redux form标签。当我单击重置按钮时,它将重置除文件字段以外的所有字段。单击重置按钮时如何重置文件字段?

<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>

在上面,当我单击重置按钮时,它会重置除文件字段之外的所有字段。单击重置按钮时如何也可以重置文件字段?

react-redux
© www.soinside.com 2019 - 2024. All rights reserved.