Question

我将以我在React上很绿的事实为序。

作为仪表板的一部分，我在Card组件中有一个动态的员工项目列表。我想添加为每个员工创建链接的功能，单击链接将打开一个模式对话框，以允许在同一页面中进行编辑。

我不确定如何在ListItem-> Link-> EmployeeEdit功能之间建立连接，以确保在每个步骤中都传递正确的道具。

因此，到目前为止，我已经在链接列表中显示了雇员，但是不确定如何创建关系以呈现EmployeeEdit组件：

列表：

    <List dense={true}>
        {(Array.isArray(employees) && employees.length != 0 )  ? employees.map(employee => {
            const LinkToEdit = ({props}) => <Link {...props} record={employee}/>;
            return(
            <ListItem
                key={employee.id}
                button
                component={LinkToEdit}
            >
                <ListItemText
                    primary={
                        `${employee.firstName} ${employee.lastName}`
                    }
                    secondary={translate('tequiti.entity.joined_date', {
                        createdAt: new Date(employee.createdAt).toLocaleString('en-US')
                    })}

                />
                <ListItemSecondaryAction/>
            </ListItem>
            )
        }) : <p>No employees for this company</p>
        }
    </List>

EDITEMPLOYEE：

const EmployeeEdit = (props) => {
    const translate = useTranslate();
    const [state, setState] = useState({showEditDialog: true});
    let {showEditDialog} = state;
    const handleCloseEditClick = () => {
        setState({
            showEditDialog: false
        });
    };
    return(
        <Dialog
            fullWidth
            open={showEditDialog}
            modal={ true }
            onClose={handleCloseEditClick}
            aria-label="Edit Employee"
            {...props}
        >
            <DialogTitle>Edit Employee</DialogTitle>
            <DialogContent>
                <TabbedForm resource="employee" toolbar={<UpdateActions {...props} />}>
                    <FormTab label={translate('root.label.identity')}>
                        <PersonInput />
                    </FormTab>
                    <FormTab label={translate('root.label.address')}>
                        <AddressInput />
                    </FormTab>
                </TabbedForm>
            </DialogContent>
            <DialogActions>
                <Button label="ra.action.cancel" onClick={() => handleCloseEditClick()}>
                    <IconCancel />
                </Button>
            </DialogActions>
        </Dialog>
)};

任何建议/帮助都会很棒！

Answer 1

如果我没看错的话，那么每个员工都有一个Dialog模式（即EmployeeEdit组件）。我可能会简化它，使其在页面上只有一个EmployeeEdit组件，并具有一个接受的employee属性。如果有雇员属性，请显示该雇员的对话框。如果employee属性为假，请隐藏对话框。然后，您可以在列表项中使用onClick来设置当前员工。像这样（为简便起见简化）：

const EmployeeEdit = ({employee, onClose, onChange, ...props}) => {
  const showDialog = Boolean(employee)
  //use onClose and onChange as appropriate
  ...
}
const EmployeeList = ({employees}) => {
  const [currentEmployee, setCurrentEmployee] = useState(null);
  const clearEmployee = () => {
    setCurrentEmployee(null)
  }
  const handleChange = (employee) => {
    //do something with the results, probably update employees array,
    //then close dialog by clearing the current employee
    setCurrentEmployee(null)
  }

  return (
    <>
      <EmployeeEdit employee={currentEmployee} onClose={clearEmployee} onChange={handleChange}/>
      {employees.map(e => {
        <ListItem onClick={() => setCurrentEmloyee(e)} />
      })}
    </>
  )
}

材质用户界面-如何使用ListItem链接打开对话框

1 个答案: