0

我正在尝试使用 PrimeReact 库中的 DropDown 初始化用户的动态列表。我能够加载它，即使我不确定它是否正确。我可以选择一个用户，但无法将其传递给表单。我也不确定我应该选择没有状态的用户。我对它们之间的交互方式有点困惑。如果我能得到一些指导，那将非常有帮助。

import { useState, useEffect, useContext } from 'react'
import { Form, Field } from 'react-final-form'
import { Panel } from 'primereact/panel'
import { Dropdown, DropdownProps } from 'primereact/dropdown'
import { Button } from 'primereact/button'

import { api } from '../services' //Axios instance

export interface IUser {
    id: number
    firstName: string
    lastName: string
  }

const selectedUserItemTemplate = (option: IUser) => {
  return <span>{`${option.lastName} ${option.firstName}`}</span>
}

const selectedUserValueTemplate = (
  option: IUser,
  { placeholder }: DropdownProps
) => {
  return option ? (
    <span>{`${option.lastName} ${option.firstName}`}</span>
  ) : (
    <span>{placeholder}</span>
  )
}

const DropDownAdaptater = ({ input, meta, hintText, data, ...rest }: any) => {
  const [selectedUser, setSelectedUser] = useState(undefined)
  const [users, setUsers] = useState<IUser[]>([])
  useEffect(() => {
    const fetchUsers = async () => {
      const { data } = await api.get<IUser[]>('/users')
      setUsers(data)
    }
    fetchUsers()
  }, [])

  console.log(input.value) //Empty -> the form does not update

  return (
    <Dropdown
      {...input}
      value={selectedUser}
      options={users}
      onChange={(e) => setSelectedUser(e.target.value)}
      itemTemplate={selectedUserItemTemplate}
      valueTemplate={selectedUserValueTemplate}
      optionLabel="optionLabel"
      placeholder={hintText}
      style={{ marginRight: '1rem', width: '240px' }}
    />
  )
}

export const Login: React.FC = () => {
  const onSubmitAuthForm = () => {
    console.log('submit')
  }

  return (
    <Panel header="Login">
      <Form onSubmit={onSubmitAuthForm}>
        {({ handleSubmit, form, submitting, pristine, values }) => {
          console.log('values FORM', values) // -----> Empty
          return (
            <form onSubmit={handleSubmit}>
              <h5>Select a user</h5>
              <Field
                name="userName"
                component={DropDownAdaptater}
                hintText="Select a user"
              />
              <Button label="Login" />
            </form>
          )
        }}
      </Form>
    </Panel>
  )
}
4

1 回答 1

1

尝试更新你自己的价值。

请参阅此处的示例

const DropDownAdaptater = ({ input, meta, hintText, data, ...rest }: any) => {
  const [selectedUser, setSelectedUser] = useState(undefined)
  const [users, setUsers] = useState<IUser[]>([])
  useEffect(() => {
    const fetchUsers = async () => {
      const { data } = await api.get<IUser[]>('/users')
      setUsers(data)
    }
    fetchUsers()
  }, [])

  useEffect(()=>{
   // update the input value, when selected
   note: it must be a single value and not an object
      input.value= selectedUser.userName; 
  },[selectedUser])

  return (
    <Dropdown
      {...input}
      value={selectedUser}
      options={users}
      onChange={(e) => setSelectedUser(e.target.value)}
      itemTemplate={selectedUserItemTemplate}
      valueTemplate={selectedUserValueTemplate}
      optionLabel="optionLabel"
      placeholder={hintText}
      style={{ marginRight: '1rem', width: '240px' }}
    />
  )
}

于 2021-03-17T22:26:55.117 回答