집 > 기사 > 웹 프론트엔드 > antd 드롭다운 상자 연결을 사용하는 단계에 대한 자세한 설명

antd 드롭다운 상자 연결을 사용하는 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-05-25 13:37:214170검색

이번에는 antd 드롭다운 박스 연동을 사용하는 단계에 대해 자세히 설명하겠습니다. antd 드롭다운 박스 연동 사용 시 주의사항은 무엇인가요? 다음은 실제 사례입니다. .

먼저 효과 요구 사항에 대해 이야기해 보겠습니다. 상단에 드롭다운 상자가 있고 하단에 드롭다운 상자가 있습니다.

리액트가 데이터 기반이라고 생각하기 때문에 더 이상 jq의 숨겨진 디스플레이를 사용할 계획이 없습니다. 대신 실행의 onChange 이벤트에서 아래 드롭다운 상자를 변경합니다. 유형 드롭다운 상자. 데이터, 다양한 드롭다운 선택 항목 렌더링.
정의 데이터: modeOptions는 각 드롭다운 상자의 값입니다. 숫자가 입력 상자로 선택되었으므로 여기의 숫자에 대한 옵션은 비어 있습니다.

    constructor(props) {
        super(props)
        this.modeOptions = {
            'channelMode': {options: ['通道1', '通道2', '通道3', '通道4'], text: '通道'},
            'batchMode': {options: [1, 2, 3, 4, 5], text: '批次'},
            'numberMode': {options: [], text: '号码'},
            'areaMode': {options: ['福州市', '厦门市'], text: '区域'}
        }
        this.state = {
            selectMode: 'channelMode'
        }
        this.selectMode = this.selectMode.bind(this)
    }

그런 다음 드롭다운 상자의 선택 이벤트에서 seletMode 값을 설정하고 antd 드롭다운 상자의 onChange 이벤트만 직접 정의하면 되며 콜백 함수의 첫 번째 매개변수가 필요하다는 사실을 발견했습니다. selectMode의 값입니다.

    selectMode(value) {
        this.setState({
            selectMode: value
        })
    }

그런 다음 렌더링에서 일부 데이터 처리를 수행

        let modelLabel = this.modeOptions[this.state.selectMode].text;
        let modelOptions = null;
        if(this.modeOptions[this.state.selectMode].options.length !== 0) {
            modelOptions = [];
            this.modeOptions[this.state.selectMode].options.map((item, index) => {
                modelOptions.push(<option>{item}</option>);
            })
        }

코드 게시: 실제로 선택한 숫자가 숫자가 아닌 경우 두 번째 드롭다운 상자 구성 요소에서 위의 modelLabel 및 modelOptions를 사용하여 드롭다운 상자를 렌더링합니다. .선택한 숫자가 숫자이면 입력 상자를 렌더링합니다.

class DemandForm extends React.Component {
    constructor(props) {
        super(props)
        this.modeOptions = {
            'channelMode': {options: ['通道1', '通道2', '通道3', '通道4'], text: '通道'},
            'batchMode': {options: [1, 2, 3, 4, 5], text: '批次'},
            'numberMode': {options: [], text: '号码'},
            'areaMode': {options: ['福州市', '厦门市'], text: '区域'}
        }
        this.state = {
            selectMode: 'channelMode'
        }
        this.selectMode = this.selectMode.bind(this)
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });
    }
    selectMode(value) {
        this.setState({
            selectMode: value
        })
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 18 },
            },
        };
        let modelLabel = this.modeOptions[this.state.selectMode].text;
        let modelOptions = null;
        if(this.modeOptions[this.state.selectMode].options.length !== 0) {
            modelOptions = [];
            this.modeOptions[this.state.selectMode].options.map((item, index) => {
                modelOptions.push(<option>{item}</option>);
            })
        }
        return (

{getFieldDecorator('selectMode', { rules: [ { required: true, message: 'Please select your country!' }, ], })( )} {getFieldDecorator('mode', { rules: [ { required: true, message: 'Please select your country!' }, ], })( this.state.selectMode !== 'numberMode' ? : )}

); } } const WrappedDemandForm = Form.create()(DemandForm);

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!