Javascript 基于第一个下拉列表的值创建额外的react select下拉列表

我正在创建一个旅游网站

我需要一个带有“孩子数量”选项的选择框。i、 e.1,2,3

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

你知道怎么做吗？

---

谢谢

您可以根据用户选择的值创建一个数组并映射它。然后你可以做同样的事情来生成你的12个选项

在JSX中：

{new Array(valueSelected).fill().map((select, index) =>
    <ReactSelect key={index}>
        {new Array(12).fill().map((opt, i) => <option key={i}/>)}
    </ReactSelect>
}

---

请输入此代码，它对我有效

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>
        );
    }
}

从“React”导入React；
从“反应选择”导入选择；
const childoptions=[
{值：'1'，标签：'child1'}，
{值：'2'，标签：'child2'}，
{值：'3'，标签：'child3'}
];
const childAgeoptions=[
{值：'1'，标签：'age1'}，
{值：'2'，标签：'age2'}，
{值：'3'，标签：'age3'}，
{值：'4'，标签：'age4'}，
{值：'5'，标签：'age5'}，
{值：'6'，标签：'age6'}，
{值：'7'，标签：'age7'}，
{值：'8'，标签：'age8'}，
{值：'9'，标签：'age9'}，
{值：'10'，标签：'age10'}，
{value:'11'，label:'age11'}，
{值：'12'，标签：'age12'}，
];
类应用程序扩展了React.Component{
状态={
selectChild:null，
showAgeOptions:false，
}
handleChild=（selectChild）=>{
这个.setState（{
选择孩子，
showAgeOptions:true
});
}
handleChildAge=（SelectedGeoption）=>{
this.setState（{selectedgeoption}）；
}
render（）{
const{selectChild}=this.state；
const{selectChildAge}=this.state；
返回(
);
}
}

如果用户选择1个或2个或3个儿童，则我需要显示相同数量的儿童选择框，否则如果值为0，则应隐藏这些框。您想要的是，如果选择1，则其他选择选项仅显示1，如果选择2，则仅显示2个选项？不是整个列表吗？不，最初应该有一个“子项数”选择框。这将有4个值0,1,2,3，默认值为0。在这个阶段，不应该看到其他选择框，然后有3个场景。场景一：如果用户选择1，则需要使用选项1-12显示一个新的附加选择框。场景2：如果用户从原始选择框中选择2，则应该有2个新的附加选择框，每个选择框的值为1-12。场景3：如果用户从原始选择框中选择3，则应该有3个新的附加选择框，每个选择框的值为1-12谢谢，如果用户最初从父项中选择numberOfChildren 3，然后显示3个子选择元素，然后将其从3更改为2，然后最后一个子选择元素应该再次消失。然后他们将3更改为2，最后一个子选择元素应该再次消失。详细阐述一下，我基本上了解了这一点，你知道如何为数组中的每个select调用定义的函数吗？我试过onChange={this.handleChildAgeChanged+index}但我认为你做不到是的，函数不是这样工作的，你应该这样称呼它：

onChange={this.handleChildAgeChanged（index）}

。对于声明：

handleChildAgeChanged=index=>event=>{