时间戳

首页 > 解决方案 > 如何使用反应钩子形式根据房间过滤数据数组学生

javascript - 如何使用反应钩子形式根据房间过滤数据数组学生

问题描述

索引.tsx

    data = {
      room: [
        {
          id: 1,
          name: 'room1'
        },
        {
          id: 2,
          name: 'room2'
        },
        {
          id: 3,
          name: 'room3'
        }
      ],
      student: [
        {
          id: 1,
          room: 'room1',
          name: 'josh'
        },
        {
          id: 2,
          room: 'room1',
          name: 'jake'
        }
      ]
    }
    const _ROOM = data['room'];
    const _STUDENT = data['student'];

const form = {
 config: [
 {
        label: "Room",
        name: "room",
        type: "select",
        rule: yup.string().required(),
        renderer: (data: any) => {
          const { control, register, errors } = useFormContext();
          return (
            <SelectPicker
              placeholder="Room"
              data={
                _ROOM && _ROOM.length > 0 ?
                  _ROOM.map(x => ({ label: x.name, value: x.id })) : []
              }
              style={{ width: '100%' }}
              onChange={(val) => {
                control.setValue('room', val);
              }}
              value={control.getValues()['room']}
            />
          );
        }
      },
{
          label: "Student",
          name: "student",
          type: "select",
          rule: yup.string().required(),
          renderer: (data: any) => {
            const { control, register, errors } = useFormContext();
            return (
              <SelectPicker
                placeholder="Student"
                data={
                  _STUDENT && _STUDENT.length > 0 ?
                    _STUDENT.map(x => ({ label: x.name, value: x.id })) : []
                }
                style={{ width: '100%' }}
                onChange={(val) => control.setValue('student', val)}
                value={control.getValues()['student']}
              />
            );
          }
        }]}

如何根据房间过滤学生。例如，我room1在学生上选择 then ，它将过滤它具有的价值room1。我尝试在房间的 onchange 中进行过滤，但它也不起作用，也没有过滤或显示控制台日志。我也使用了状态然后在 onChange 中设置，但它也不起作用。

标签： javascriptreactjstypescriptnext.jsreact-hook-form

解决方案

看看这个：https ://react-hook-form.com/advanced-usage/#ConditionalControlledComponent

基本上，您可以观察更改room并过滤掉该student字段中的选项。

const {room} = watch();

并在 中，将propSelectPicker修改为：data

data={
   _STUDENT && _STUDENT.length > 0 ?
   _STUDENT.filter(s => s.room === room).map(x => ({ label: x.name, value: x.id })) : []
}

推荐阅读