react-hook-form 使用重置选择下拉值

Posted 2023-02-22

【中文标题】react-hook-form 使用重置选择下拉值

【英文标题】：reack-hook-form selected dropdown value using reset

【发布时间】：2021-12-11 04:32:18

【问题描述】：

我正在以更新位置的形式更新详细信息。 我需要在表单字段中显示现有值。

下面是更新组件的代码：

import axios from 'axios'
import  useState, useEffect  from 'react'
import  useForm  from 'react-hook-form'

export default function Edit(...props) 
  const 
    register,
    handleSubmit,
    setValue,
    reset,
    formState:  errors ,
   = useForm(mode: 'onBlur' );

   useEffect(() => 
    
    if (props.locationDetails) 
        console.log(props.locationDetails) 
        // in this console I can get  'name' : 'name value',  'company' : 'UUID'
        reset( props.locationDetails);
    
   , [reset])

   const editLocation = async(data) => 
       .....
   

   return (
     <form className="g-3" onSubmit=handleSubmit(editLocation) data-testid="editLocationForm">

        <input type="text" ...register('name',  required: true ) className="form-control"  placeholder="Enter Name Here" />
                                                    errors.name && <p className="error" role="error" >Name is required.</p>

        <select ...register('company',  required: true ) 
                className="form-control" >
                props.companies && props.companies.map((company, index) => 
                <option key=index value=company.UUID>company.name</option>
                
                )
        </select>
       
        .....
     </form>
   )





   export async function getServerSideProps( params ) 

    if(params.id) 
        let locationId = params.id

        let locationResponse = await axios(process.env.BASE_URL + '/locations/' + locationId,
            headers : 
                'Content-Type': 'application/json',
                'Authorization' : 'Bearer ' + process.env.TOKEN
            
        )

        let companiesResponse = await axios(process.env.BASE_URL + '/companies',
            headers : 
                'Content-Type': 'application/json',
                'Authorization' : 'Bearer ' + process.env.TOKEN
            
        )

        if(locationResponse.status == 200 && locationResponse.data && companiesResponse.status == 200) 
            
            let locationDetails = await locationResponse.data

            let companies = await companiesResponse.data.results

            locationDetails.company = locationDetails.links.Company

            return 
                props : 
                    locationDetails: locationDetails,
                    companies: companies
                
            
         else 
            return 
                props : 
                    locationDetails: ,
                    locationDetails:
                
            
            
     else 
        return 
            props : 
                locationDetails: ,
                locationDetails:
            
        

    

在这里，我可以在其输入文本字段中设置所有现有的位置值，但无法显示选定的下拉菜单。

响应结构如下：

   "name": "New York",
   "country": "USA",
   "company": "UUID"   <<<< this is the uuid which needs to be selected on select dropdown.

【问题讨论】：

抱歉“注册”道具的结构如何？为什么有“数据-”属性？ （注意通常html元素上的属性被转换为他们的javascript api实现而不是kebab-case html属性）

props 的结构是最后一个 json 代码 sn-p 。 data-* 用于测试目的。你可以忽略它们

注册（'公司'，必需：真）？这是一个函数而不是普通对象，对吧？

我需要在下拉列表中显示选定的值，但 id 嵌套在 props 对象中

注册（'公司'，必需：真）？用于反应表单钩子

【参考方案1】：

对于嵌套字段，在属性之间添加点：

<select ...register("links.company",  required: true )>
  (companies || []).map((company, index) => (
    <option key=index value=company.UUID>
      company.name
    </option>
  ))
</select>

【讨论】：

这里可以看到他在使用=>() required 返回jsx进行渲染

@MatteoBombelli 你是在和我说话还是在和 OP 说话？

它没有显示下拉列表中选择的现有值

@DeepKakkar 抱歉，我在回答其他问题。很高兴你终于解决了。

【参考方案2】：

和之前写的一样，你需要返回一些 jsx

<select onChange=onChange>
  (companies || []).map((companyData, index) => (
    <option key=index value=companyData.links.UUID>
      company.name
    </option>
  ))
</select>

这将返回嵌套值。

如果你需要通过 react 来管理状态

const [selectedData, setSelectedData] = useState("");

const onChange = useCallback((event)=>
   const valueReturned = evant.target.value;
   setSelectedData(valueReturned)
   ... do what you need
, [... put here dependencies])

...

<select onChange=onChange value=selectedData>
  (companies || []).map((companyData, index) => (
    <option key=index value=companyData.links.UUID>
      company.name
    </option>
  ))
</select>

这里是一个将状态作为受控组件进行管理的回调示例

https://reactjs.org/docs/forms.html#controlled-components

如果你愿意，你也可以使用不受控制的组件

https://reactjs.org/docs/uncontrolled-components.html

【讨论】：

先生，我必须在下拉列表中显示选定的值。形式为 react-hook-form npmjs.com/package/react-hook-form

我在getServerSideProps函数中使用locationDetails.company = locationDetails.links.Company解决了自己的嵌套问题

现在我只想显示下拉列表中选择的现有值

在原生选择上，被选元素已经被选中，是指请求发送后吗？

我已经解决了。我会尽快写下答案。嗯...感谢您的帮助

【参考方案3】：

为了消除嵌套问题，我将serversideprops中的响应修改为

locationDetails.company = locationDetails.links.Company

我之前也更新了这个问题。

这是我用来显示已选择的现有选项的代码。

<select ...register('company',  required: true ) className="form-control">
   (props.companies || []).map((company, index) => (
   <option key=index value=company.UUID selected=company.UUID === register.company>
           company.name
   </option>
))

selected=company.UUID === register.company 是条件。