在同一个类组件中处理多个<select>下拉菜单,使用相同的状态将值传递给redux可以通过以下步骤完成:
下面是一个示例代码:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { updateDropdownValue } from './redux/actions';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
dropdownValue1: '',
dropdownValue2: '',
// 添加更多下拉菜单的值...
};
}
handleDropdownChange1 = (event) => {
const value = event.target.value;
this.setState({ dropdownValue1: value });
this.props.updateDropdownValue(value);
}
handleDropdownChange2 = (event) => {
const value = event.target.value;
this.setState({ dropdownValue2: value });
this.props.updateDropdownValue(value);
}
// 添加更多下拉菜单的事件处理程序...
render() {
return (
<div>
<select value={this.state.dropdownValue1} onChange={this.handleDropdownChange1}>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
{/* 添加更多选项... */}
</select>
<select value={this.state.dropdownValue2} onChange={this.handleDropdownChange2}>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
{/* 添加更多选项... */}
</select>
{/* 添加更多<select>下拉菜单... */}
</div>
);
}
}
const mapDispatchToProps = (dispatch) => {
return {
updateDropdownValue: (value) => dispatch(updateDropdownValue(value))
};
};
export default connect(null, mapDispatchToProps)(MyComponent);
在上述示例代码中,updateDropdownValue
是一个redux action,用于更新redux store中的值。通过调用this.props.updateDropdownValue(value)
,我们将<select>下拉菜单的值传递给redux store。
注意:这里没有提及任何特定的云计算品牌商,你可以根据自己的需求选择适合的云计算服务。
领取专属 10元无门槛券
手把手带您无忧上云