如何将更新的值传递到新的单独组件中？

Posted 2023-02-23

【中文标题】如何将更新的值传递到新的单独组件中？

【英文标题】：How do I pass in an updated value into a new separate component?

【发布时间】：2021-08-11 15:10:16

【问题描述】：

在部门选择字段中选择“开发”后，我希望更新后的值传递到新组件“扩展开发”中。

这是一个填充部门字段的列表

export const getDepartmentCollection = ()=>([
     id: '1', title: 'Development' ,
     id: '2', title: 'Marketing' ,
     id: '3', title: 'Accounting' ,
     id: '4', title: 'HR' ,
])

这是用户可以从部门下拉菜单中选择的地方。

<Controls.Select
    name="departmentId"
    label="Department"
    value=values.departmentId
    onChange=handleInputChange
    options=employeeService.getDepartmentCollection()
    error=errors.departmentId
/>

一旦用户做出选择，我想在这里将新值传递给这个新组件。

  const ExpandDevelopment = (fieldValue = values) => 
    if (fieldValue.departmentId === "Development") 
        return (
          <Controls.Input
            label="Developer Position"
            name="developerPosition"
            value=values.developerPosition
          />
        );
       else 
        return null;
    
  ;

但是，fieldValue.departmentID 呈现为未定义。

如果您想深入了解此代码的工作原理 (/page/Employees/EmployeeForm) - CodeSandBox：https://codesandbox.io/s/intelligent-river-9diyw

【参考方案1】：

查看了您的代码并进行了一些更改。您可能需要对验证代码进行一些调整。

Updated Sandbox

【讨论】：

如果答案有效，您能否接受并投票赞成：-)

刚刚做了。因为我是新手，所以我还不能投票。