reactjs - 如何根据 react-table v.6 中特定行的另一个下拉列表填充下拉列表
问题描述
我有两列带有下拉菜单。当我从第一列的任何下拉列表中选择选项时,选项列表应在同一行的第二列下拉列表中更改。实际上,它会影响整个列并在所有下拉列表中进行更改。
如何使左侧下拉列表中的更改仅影响下一个右侧下拉列表?这是我的代码:
const contact = {
"Phone #": [
{ val: 0, text: 'Cell Phone' },
{ val: 1, text: 'Home Phone' },
{ val: 2, text: 'Office Phone 1' },
{ val: 3, text: 'Office Phone 2' },
{ val: 4, text: 'Phone 10' },
{ val: 5, text: 'Phone 2' },
{ val: 6, text: 'Phone 4' },
{ val: 7, text: 'Phone 5' },
{ val: 8, text: 'Phone 6' },
{ val: 9, text: 'Phone 7' },
{ val: 10, text: 'Phone 8' },
{ val: 11, text: 'Phone 9' },
{ val: 12, text: 'Primary Contact Type' }
],
"E-mail": [
{ val: 0, text: 'Credit Card Notices only email' },
{ val: 1, text: 'Email 1' },
{ val: 2, text: 'Email 2' },
{ val: 3, text: 'Email 3' },
{ val: 4, text: 'Email 4' },
{ val: 5, text: 'ePrice Quote only email' },
{ val: 6, text: 'pegasus Tablet Email' },
{ val: 7, text: 'Statement only email Address' }
],
"DTN": [
{ val: 0, text: 'DTN #1' },
{ val: 1, text: 'DTN #2' },
{ val: 2, text: 'DTN #3' }
]
}
和
class ContactDocMaintenance extends Component {
constructor(props) {
super(props);
this.state = {
data: { data },
defValue: false,
contactValue: 'Phone #'
}
}
onChange = ({ target: { value } }) => {
this.setState({ contactValue: value });
}
render() {
const { contactValue } = this.state;
const options = contact[contactValue];
return (
<div className="row">
<div className="col-8">
<div className="row">
<div className="col-12 mt-2">
<ContentCard name="Contact Information" >
<ReactTable
data={data}
keyField="id"
pageSizeOptions={[20, 30, 50, 100, 200, 500]}
columns={[
{
Header: "Status",
accessor: "status",
width: 100,
},
{
Header: "Contact Type",
id: "contactType",
accessor: "contactType",
width: 100,
Cell: row => (<select onChange={this.onChange} margins="m-0" >
< option value="Phone #" > Phone #</option>
<option value="E-mail">E-mails</option>
<option value="DTN">DTN</option>
</select>)
},
{
Header: "Contact Type Description",
accessor: "contactTypeDescription",
width: 200,
Cell: row => (<select margins="m-0" >{options.map((opt) => <option key={opt.val} value={opt.val}>{opt.text}</option>)}</select>)
},
{
Header: "Contact value",
accessor: "contactValue",
width: 100
},
{
Header: "Notification",
accessor: "notification",
width: 100
}
]}
defaultPageSize={10}
className="-highlight"
showPagination={false}
/>
</ContentCard>
</div>
</div>
</div>
</div>
);
}
}
export default ContactDocMaintenance;
数据:
const data = [ {
"status": "",
"contactType": "",
"contactTypeDescription": "",
"contactValue": "(235)253-4524",
"notification": "",
},
{
"status": "",
"contactType": "",
"contactTypeDescription": "",
"contactValue": "(450)454-7878",
"notification": "",
},
{
"status": "",
"contactType": "",
"contactTypeDescription": "",
"contactValue": "(514)777-7777",
"notification": "",
},
{
"status": "",
"contactType": "",
"contactTypeDescription": "",
"contactValue": "(235)253-4524",
"notification": "",
},
{
"status": "",
"contactType": "",
"contactTypeDescription": "",
"contactValue": "(450)454-7878",
"notification": "",
},
{
"status": "",
"contactType": "",
"contactTypeDescription": "",
"contactValue": "(514)777-7777",
"notification": "",
},
{
"status": "",
"contactType": "",
"contactTypeDescription": "",
"contactValue": "(514)777-7777",
"notification": "",
},
{
"status": "",
"contactType": "",
"contactTypeDescription": "",
"contactValue": "(450)454-7878",
"notification": "",
},
{
"status": "",
"contactType": "",
"contactTypeDescription": "",
"contactValue": "(450)454-7878",
"notification": "",
},
{
"status": "",
"contactType": "",
"contactTypeDescription": "",
"contactValue": "(450)454-7878",
"notification": "",
}
]
解决方案
推荐阅读
- php - PHP imagick将PDF转换为JPEG不起作用
- html - 圆形曲线的剪辑路径选项?
- javascript - 比多次调用 setState 更好的方法来处理无线电组形式?
- templates - IntelliJ 模板函数将变量名转换为常量变量名(大写带下划线)
- angularjs - 将`$scope.$broadcast('test', false);`中的false改为true` 视图
- javascript - JavaScript setTimeout 无递归无限循环
- ios - 为什么 QR Scanner Ionic 插件会产生错误?
- typescript - 在 TypeScript 中使用映射类型时更严格的联合类型
- python - GTK、Glade 和 Python 使用 connect_signals 连接来自多个类的处理程序
- python - lock.acquire 是否阻塞非关键部分中的进程