通过价值从一个下拉到另一个下拉

Question

我的组件中有两个下拉菜单，第二个下拉菜单会根据第一个下拉菜单的值自动改变它的值。但是第二个下拉菜单也可以改变它的值。你们能帮我解释一下方法/函数吗?任何帮助我们都会很感激。提前感谢!

这里是常量分量

export const dropdownDenied= [
{
label: "None",
value: "0"
},
{
label: "Retail",
value: "1"
},
{
label: "Customer",
value: "2"
},
]

class ContentReceived extends React.Component {
constructor(props) {
super(props);
this.state = {
dropSelected : ""
}
handleSelected = dropSelected => {
this.setState({dropSelected})
}
render(){
const { dropSelected } = this.props
return(
//First DropDown
<Select
disabled={false}
onChange={this.handleSelected}
value={dropSelected}
>
{dropdownDenied.map((item, index) => (
<option value={item.value || ""} key={index}>
{item.label}  
</option>
))}
</Select>
//Second DropDown
Select
value={dropSelected}
onChange={e => {
this.actionRow(
i,
{
key: "reject_from",
value: e.target.value
},
idx
);
}}
>
{dropdownDenied.map((item, index) => (
<option value={item.value || ""} key={index}>
{item.label}
</option>
))}
</Select>
);
}

Answer 1

我有答案了:

将此添加到状态

之后

class ContentReceived extends React.Component {
constructor(props) {
super(props);
this.state = {
dropSelected : ""
}
this.handleSelected = this.handleSelected.bind(this) //<<<add this
}
handleSelected(e){
this.setState({dropSelected: e.target.value});
}
render(){
const { dropSelected } = this.props
return(
//First DropDown
<Select
disabled={false}
onChange={this.handleSelected}
value={dropSelected}
>
{dropdownDenied.map((item, index) => (
<option value={item.value || ""} key={index}>
{item.label}  
</option>
))}
</Select>
//Second DropDown
Select
value={dropSelected}
onChange={e => {
this.actionRow(
i,
{
key: "reject_from",
value: e.target.value
},
idx
);
}}
>
{dropdownDenied.map((item, index) => (
<option value={item.value || ""} key={index}>
{item.label}
</option>
))}
</Select>
);
}

Answer 2

In Second - value属性:- value = {secDValue}

这里将secDValue作为本地状态

和onChange的下拉菜单设置值相应

First - onChange={(e) =>setSecDValue ()

Second - onChange={(e) =>setSecDValue ()