Question

我正在使用react-redux创建一个示例应用程序。我根据以下链接将所有文本字段包装到表单控件中How to use Redux-Form with React-Bootstrap?问题是如何将react-redux中的select drop list与react-bootstrap集成？

import React from 'react';
import { Control,Form,actions,Errors,formReducer } from 'react-redux-form';
import { connect } from 'react-redux';
import * as ReactBootstrap from 'react-bootstrap';

class Forms extends React.Component {
        render() {
            return (<ReactBootstrap.Form horizontal {...this.props} {...this.input} />)
        }
    }
    class dropDown extends React.Component {
        render() {
            return (<ReactBootstrap.FormControl componentClass="select" {...this.props} {...this.input} />)
        }
    }
class UserRegistration extends React.Component {
    render() {

        const { dispatch} = this.props;
        const status=(val)=>{
            console.log(this.props);
            console.log(val);
        }

        const email = (value) => required(value) ?  /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) : true;
        const required = val => val && val.length;

        const maxLength=value=>required(value) ? value.length <= 20 : true;
        const minAge=value=>required(value) ? value >=18 : true;
        const ReduxFormControl = ({input, meta, ...props}) => {
            return <ReactBootstrap.FormControl {...props} {...input} />
        };

        const Formbutton=({input,meta,...props}) => {
            return <ReactBootstrap.Button type="submit" bsStyle="info" />
        };

        return (
        <ReactBootstrap.Col sm={5} smOffset={4}>
            <ReactBootstrap.Well>
                <Form model="userReg" onSubmit={(userReg) => dispatch(actions.load("userReg",userReg))}  component={Forms} validators={{
    '': { passwordsMatch: (vals) => required(vals.confpwd) ? vals.password === vals.confpwd : true}}} >
                    <ReactBootstrap.FormGroup>
                        <ReactBootstrap.Col sm={3} componentClass={ReactBootstrap.ControlLabel} >
                            First Name
                        </ReactBootstrap.Col>
                        <ReactBootstrap.Col sm={9}>
                                <Control.text model="userReg.fname" validators={{required,maxLength}} placeholder="First Name" component={ReduxFormControl}  />
                                <Errors style={{color:"red"}} model="userReg.fname" show={(field) => field.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="userReg.lname" validators={{required,maxLength}} placeholder="Last Name" component={ReduxFormControl}  />
                                <Errors style={{color:"red"}} model="userReg.lname" show={(field) => field.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} >
                            Age
                        </ReactBootstrap.Col>
                        <ReactBootstrap.Col sm={9}>
                                <Control.text model="userReg.age" type="number" validators={{required,minAge}} placeholder="Age" component={ReduxFormControl}  />
                                <Errors style={{color:"red"}} model="userReg.age" show={(field) => field.touched } messages={{required:'Age required',minAge:'must be atleast 18'}} />
                        </ReactBootstrap.Col>
                    </ReactBootstrap.FormGroup>
                    <ReactBootstrap.FormGroup>
                        <ReactBootstrap.Col sm={3} componentClass={ReactBootstrap.ControlLabel} >
                            Email
                        </ReactBootstrap.Col>
                        <ReactBootstrap.Col sm={9}>
                                <Control.text model="userReg.email" validators={{required,email}} placeholder="Email"  component={ReduxFormControl}  />
                                <Errors style={{color:"red"}} model="userReg.email" show={(field) => field.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="userReg.password" validators={{required}} placeholder="Password" component={ReduxFormControl}  />
                                <Errors style={{color:"red"}} model="userReg.password" show={(field) => field.touched } messages={{required:'Password required',passwordsMatch:'conf password'}} />
                        </ReactBootstrap.Col>
                    </ReactBootstrap.FormGroup> 
                    <ReactBootstrap.FormGroup>
                        <ReactBootstrap.Col sm={3} componentClass={ReactBootstrap.ControlLabel} >
                            Password
                        </ReactBootstrap.Col>
                        <ReactBootstrap.Col sm={9}>
                                <Control.text model="userReg.confpwd" type="password" validators={{required}}  placeholder="Confirm Password" component={ReduxFormControl}  />
                                <Errors style={{color:"red"}} model="userReg.confpwd" show={(field) => field.touched } messages={{required:'Confirm Password required'}} />
                                <Errors style={{color:"red"}} model="userReg" show={(field) => field.touched } messages={{passwordsMatch:'password and confirm password must be same'}} />
                        </ReactBootstrap.Col>
                    </ReactBootstrap.FormGroup> 
                    <ReactBootstrap.FormGroup>
                        <ReactBootstrap.Col sm={3} componentClass={ReactBootstrap.ControlLabel} >
                            Status
                        </ReactBootstrap.Col>
                        <ReactBootstrap.Col sm={9}>
                                <Control.select model="userReg.status"   component={dropDown} validators={{status}}>
                                    <option   value="" disabled>choose an option</option>
                                    <option value="Online">Online</option>
                                    <option value="Away">Away</option>
                                    <option value="InActive">Inactive</option>
                                </Control.select>
                        </ReactBootstrap.Col>
                    </ReactBootstrap.FormGroup>
                    <ReactBootstrap.FormGroup>

                        <ReactBootstrap.Col sm={4} smOffset={3}>
                                <ReactBootstrap.Button type="submit" bsStyle="info">Submit</ReactBootstrap.Button>
                        </ReactBootstrap.Col>
                    </ReactBootstrap.FormGroup>

                </Form >
            </ReactBootstrap.Well>  
        </ReactBootstrap.Col>   
        )
    }
}

export default connect (null)(UserRegistration);

Answer 1

< FormGroup controlId = "formControlsSelect" >
    <ControlLabel>Select</ControlLabel>
    <FormControl componentClass="select" placeholder="select">
        <option value="select">select</option>
        <option value="other">...</option>
    </FormControl>
</FormGroup >

https://react-bootstrap.github.io/components/forms/

这会有帮助吗？

如何将react-redux中的select下拉列表与react-bootstrap选择列表集成

1 个答案: