Javascript 在React中选择特定选项时，如何禁用下拉菜单？

我已经使用React table（）实现了一个表。我根据从服务器获取的数据填充数据。现在我在两列的顶部有两个过滤器下拉列表。如果第1列过滤器下拉列表设置为特定值，我想禁用第2列过滤器下拉列表。

我实现了基本过滤器下拉列表，如下所示：

    {
              Header: 'Name',
              accessor: 'Name',
              id: 'Name',
              Cell: ({ value }) =>
              value === 'group1' ? 'group1' : 'group2',
              filterMethod: (filter, row) => {
                if (filter.value === 'all') {
                  return true;
                }
                if (filter.value === 'group1') {
                  return row[filter.id] === 'group1';
                }
              },
              Filter: ({ filter, onChange }) => (
                <select
                    onChange={event => onChange(event.target.value)}
                    style={{ width: '100%' }}
                    value={filter ? filter.value : 'all'}
                >
                  <option value="all">All</option>
                  <option value="group1">Group1</option>
                </select>
            ),
            },
            {
              filterable: ({ val }) => {
                  if (tenantName.value === 'group1') {
                    return true;
                  }
                  else {
                    return false;
                  }
              },
              Header: 'ID',
              accessor: 'Id',
              id: 'Id',
              Cell: ({ value }) => (value === '3' ? '3' : '5'),
              filterMethod: (filter, row) => {
                if (filter.value === 'all') {
                  return true;
                }
                if (filter.value === '3') {
                  return row[filter.id] === '3';
                }
                if (filter.value === '5') {
                  return row[filter.id] === '5';
                }

              },
              Filter: ({ filter, onChange }) => (
                <select
                    onChange={event => onChange(event.target.value)}
                    style={{ width: '100%' }}
                    value={filter ? filter.value : 'all'}
                >
                  <option value="all">All</option>
                  <option value="3">3</option>
                  <option value="5">5</option>
                </select>
            ),
            },
          ],

{
标题：“名称”，
访问者：“名称”，
id:'名称'，
单元格：（{value}）=>
值=='group1'？'group1'：'group2'，
过滤器方法：（过滤器，行）=>{
如果（filter.value==='all'）{
返回true；
}
如果（filter.value=='group1'）{
返回行[filter.id]=“group1”；
}
},
筛选器：（{Filter，onChange}）=>(
onChange（event.target.value）}
样式={{width:'100%}
value={filter？filter.value:'all'}
>
全部的
第一组
),
},
{
可筛选：（{val}）=>{
如果（tenantName.value=='group1'）{
返回true；
}
否则{
返回false；
}
},
标题：“ID”，
访问者：“Id”，
id:'id'，
单元格：（{value}）=>（value==='3'？'3'：'5'），
过滤器方法：（过滤器，行）=>{
如果（filter.value==='all'）{
返回true；
}
如果（filter.value==“3”）{
返回行[filter.id]=“3”；
}
如果（filter.value==“5”）{
返回行[filter.id]=“5”；
}
},
筛选器：（{Filter，onChange}）=>(
onChange（event.target.value）}
样式={{width:'100%}
value={filter？filter.value:'all'}
>
全部的
3.
5.
),
},
],

如果在第一个下拉列表中选择Group1，则需要启用第二个下拉列表。但是，如果第一个下拉列表设置为All，则需要禁用下拉列表2。

---

如何实现上述功能？

您可以管理父组件中的选定值，并根据您的条件传递

禁用的
道具。

例如，在下面的示例中，我们有2个
下拉列表
组件

使用
数字
数组
使用
名称
数组
如果用户从
numbers
下拉列表中选择编号
3
，这将禁用
names
下拉列表


const下拉列表=（{selectedValue，disabled，options，onChange}）=>{
返回(
{
options.map（o=>{o}）
}
);
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数字：[1,2,3,4,5]，//3应禁用第二个下拉列表
姓名：[“约翰”、“简”、“埃里克”]，
selectedNumber:“”，
selectedName:“”
}
this.onNumbersChange=this.onNumbersChange.bind（this）；
this.onNamesChange=this.onNamesChange.bind（this）；
}
onNumbersChange（e）{
this.setState（{selectedNumber:e.target.value}）；
}
更改名称（e）{
this.setState（{selectedName:e.target.value}）；
}
render（）{
const{numbers，names，selectedNumber，selectedName}=this.state；
返回(
);
}
}
ReactDOM.render（，document.getElementById（'root'））

如何将名称放置在从list@user1997你是什么意思，比如重置
选择的名称
？如果
selectedNumber
为3，则可以在
onNumbersChange
处理程序中执行该逻辑，并更新
selectedName