Question

我正在创建一个旅游网站。

我需要一个选择框，其中包含“孩子数”选项。即1,2,3

如果用户选择1，那么我需要在下方显示一个额外的react-select元素，以便用户选择孩子的年龄（1、2、3、4、5、6、7、8、9， 10,11,12）
如果用户选择2，则我需要在下面显示两个额外的反应选择元素，以便用户选择孩子的年龄（1、2、3、4、5、6、7、8、9， 10,11,12）
如果用户选择3，则我需要在下面显示三个额外的反应选择元素，以便用户选择孩子的年龄（1、2、3、4、5、6、7、8、9， 10,11,12）

任何想法该怎么做？谢谢

Answer 1

您可以根据用户选择的值创建一个数组并进行映射。然后，您可以执行相同的操作来生成12个选项。

在您的JSX中：

string filePath = $"{Path.GetDirectoryName(Path.GetDirectoryName(System.IO.Directory.GetCurrentDirectory()))}\\packages\\foo.1.0.4\\lib\net45\\bar.ttf";

（我不知道组件的名称是什么）

编辑

这是一个使用{new Array(valueSelected).fill().map((select, index) => <ReactSelect key={index}> {new Array(12).fill().map((opt, i) => <option key={i}/>)} </ReactSelect> }的完整示例：

Array.from

class App extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            choices: 1
        }
    }

    choiceChanged = ev => {
        this.setState({ choices: ev.target.value })
    }

    render() {
        return (
            <div>
                <select onChange={this.choiceChanged}>
                    <option value={1}>1</option>
                    <option value={2}>2</option>
                    <option value={3}>3</option>
                </select>
                {Array.from({ length: this.state.choices }).map((select, index) =>
                    <select key={index}>
                        {Array.from({ length: 12}).map((opt, i) => <option key={i} value={i}>{i + 1}</option>)}
                    </select>
                )}
            </div>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById('root'))

Answer 2

请使用此代码，它对我有用

import React from 'react';
import Select from 'react-select';

const childoptions = [
    { value: '1', label: 'child1' },
    { value: '2', label: 'child2' },
    { value: '3', label: 'child3' }
];
const childAgeoptions = [
    { value: '1', label: 'age1' },
    { value: '2', label: 'age2' },
    { value: '3', label: 'age3' },
    { value: '4', label: 'age4' },
    { value: '5', label: 'age5' },
    { value: '6', label: 'age6' },
    { value: '7', label: 'age7' },
    { value: '8', label: 'age8' },
    { value: '9', label: 'age9' },
    { value: '10', label: 'age10' },
    { value: '11', label: 'age11' },
    { value: '12', label: 'age12' },
];

class App extends React.Component {
    state = {
        selectChild: null,
        showAgeOptions: false,
    }
    handleChild = (selectChild) => {
        this.setState({ 
            selectChild,
            showAgeOptions: true  
        });
    }
    handleChildAge = (selectedAgeOption) => {
        this.setState({ selectedAgeOption });
    }
    render() {
        const { selectChild } = this.state;
        const { selectChildAge } = this.state;

        return (
            <div>
                <Select
                    value={selectChild}
                    onChange={this.handleChild}
                    options={childoptions}
                />
                <Select
                value={selectChild}
                onChange={this.handleChildAge}
                options={childAgeoptions}
                />
            </div>
        );
    }
}

根据第一个下拉菜单的值创建额外的“反应选择”下拉菜单

2 个答案: