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

Question

在 selection 字段中创建 selection“Development”后，我希望将更新后的值传递到新组件“ExpandDevelopment”中。

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

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

这是用户可以从“部门”下拉菜单中select的地方。

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

一旦用户创建了一个 selection，我想在这里将新值传递给这个新组件。

  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

Answer 1

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

Updated Sandbox

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

How do I pass in an updated value into a new separate component?

reactjs

function

react-hooks

components

undefined