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

Question

我希望更新后的值传递到新组件中"ExpandDevelopment；在作出选择之后；"发展"；在部门选择字段中。

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

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/Employes/EmployeForm(-CodeSandBox：https://codesandbox.io/s/intelligent-river-9diyw

Answer 1

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

更新的沙盒