Material Table select 菜单连接到每一行?
Marerial Table select menu is connected to each row?
我的 Material-Table 有一个 select 菜单作为列之一,但是当我 select 其中一个选项时,它会为所有行更改它.如何使更改行特定,以便它们彼此不连接?我意识到 event.target.value 方法适用于所有映射的 select 菜单,我无法弄清楚如何使其特定于一个菜单。
有问题的行是 Facility 列
const selectData = ["One", "Two", "Three"];
function Table() {
const columns = [
{
title: "Avatar",
render: (rowData) => (
<Avatar
maxInitials={1}
size={40}
round={true}
name={rowData === undefined ? " " : rowData.first_name}
/>
),
},
{ title: "ID", field: "_id", hidden: true },
{ title: "Name", field: "name" },
{ title: "Email", field: "email" },
{ title: "Company", field: "companyID" },
{ title: "Role", field: "role" },
{
title: "Facility",
render: (rowData) => (
<FormControl>
<InputLabel id="demo-mutiple-checkbox-label">Tags</InputLabel>
<Select
labelId="demo-mutiple-checkbox-label"
id="demo-mutiple-checkbox"
multiple
value={items}
onChange={handleChange}
input={<Input />}
renderValue={(selected) => selected.join(", ")}
MenuProps={MenuProps}
>
{selectData.map((item) => (
<MenuItem key={item} value={item}>
<Checkbox checked={items.indexOf(item) > -1} />
<ListItemText primary={item} />
</MenuItem>
))}
</Select>
</FormControl>
),
},
{ title: "Password", field: "password" },
];
const [data, setData] = useState([]);
const [items, setItems] = useState([]); //table data
const handleChange = (event) => {
setItems(event.target.value);
};
return (
<div>
<MaterialTable
title="Users"
columns={columns}
data={data}
icons={tableIcons}
editable={{
onRowUpdate: (newData, oldData) =>
new Promise((resolve) => {
handleRowUpdate(newData, oldData, resolve);
}),
onRowAdd: (newData) =>
new Promise((resolve) => {
handleRowAdd(newData, resolve);
}),
onRowDelete: (oldData) =>
new Promise((resolve) => {
handleRowDelete(oldData, resolve);
}),
}}
/>
</div>
);
}
我认为你应该在Facility列中定义一个editComponent
,这样你就可以修改当前rowData
和不仅仅是在 select
组件中设置为 value
的 items
变量,因此显示在每一行中。
这是一个例子:
const tableColumns = [
{ title: "Client", field: "id" },
{ title: "Name", field: "name" },
{
title: "Choose a Fruit",
field: "fruit",
editComponent: ({ value, onChange }) => (
<select onChange={(e) => onChange(e.target.value)}>
<option selected value={value}>
{value}
</option>
{fruitsList.map(
(item) =>
item !== value && (
<option key={item} value={item}>
{item}
</option>
)
)}
</select>
)
}
];
希望对你有用!完整代码和沙盒 here.
我的 Material-Table 有一个 select 菜单作为列之一,但是当我 select 其中一个选项时,它会为所有行更改它.如何使更改行特定,以便它们彼此不连接?我意识到 event.target.value 方法适用于所有映射的 select 菜单,我无法弄清楚如何使其特定于一个菜单。
有问题的行是 Facility 列
const selectData = ["One", "Two", "Three"];
function Table() {
const columns = [
{
title: "Avatar",
render: (rowData) => (
<Avatar
maxInitials={1}
size={40}
round={true}
name={rowData === undefined ? " " : rowData.first_name}
/>
),
},
{ title: "ID", field: "_id", hidden: true },
{ title: "Name", field: "name" },
{ title: "Email", field: "email" },
{ title: "Company", field: "companyID" },
{ title: "Role", field: "role" },
{
title: "Facility",
render: (rowData) => (
<FormControl>
<InputLabel id="demo-mutiple-checkbox-label">Tags</InputLabel>
<Select
labelId="demo-mutiple-checkbox-label"
id="demo-mutiple-checkbox"
multiple
value={items}
onChange={handleChange}
input={<Input />}
renderValue={(selected) => selected.join(", ")}
MenuProps={MenuProps}
>
{selectData.map((item) => (
<MenuItem key={item} value={item}>
<Checkbox checked={items.indexOf(item) > -1} />
<ListItemText primary={item} />
</MenuItem>
))}
</Select>
</FormControl>
),
},
{ title: "Password", field: "password" },
];
const [data, setData] = useState([]);
const [items, setItems] = useState([]); //table data
const handleChange = (event) => {
setItems(event.target.value);
};
return (
<div>
<MaterialTable
title="Users"
columns={columns}
data={data}
icons={tableIcons}
editable={{
onRowUpdate: (newData, oldData) =>
new Promise((resolve) => {
handleRowUpdate(newData, oldData, resolve);
}),
onRowAdd: (newData) =>
new Promise((resolve) => {
handleRowAdd(newData, resolve);
}),
onRowDelete: (oldData) =>
new Promise((resolve) => {
handleRowDelete(oldData, resolve);
}),
}}
/>
</div>
);
}
我认为你应该在Facility列中定义一个editComponent
,这样你就可以修改当前rowData
和不仅仅是在 select
组件中设置为 value
的 items
变量,因此显示在每一行中。
这是一个例子:
const tableColumns = [
{ title: "Client", field: "id" },
{ title: "Name", field: "name" },
{
title: "Choose a Fruit",
field: "fruit",
editComponent: ({ value, onChange }) => (
<select onChange={(e) => onChange(e.target.value)}>
<option selected value={value}>
{value}
</option>
{fruitsList.map(
(item) =>
item !== value && (
<option key={item} value={item}>
{item}
</option>
)
)}
</select>
)
}
];
希望对你有用!完整代码和沙盒 here.