reactjs - React-Hook-Form setValue för Material-UI Autocomplete fungerar inte

Jag bygger ett formulär med React-Hook-Form och Material-UI. Varje Material-UI formulärkomponent är inlindad i en react-hook-form Controller-komponent.

Användaren har möjlighet att automatiskt fylla i formuläret med olika uppsättningar fördefinierade värden när hen klickar på en knapp. Jag försöker använda setValue() för att uppnå detta och det verkar fungera bra för textinmatning och val. Däremot, för autokomplettering visas inte det nya värdet även om det skickas korrekt vid formulärinlämning. Dessutom, när ett textområde visas verkar innehållet blandas med etiketten.

Här är ett komplett exempel: CodeSandbox-länk

Svar #1

Du behöver kontrollera värdet av AutoComplete genom att skicka value-attributet till AutoComplete-komponenten, men eftersom du använder ett strängvärde kan du inte skicka värde till AutoComplete direkt och du bör hitta mål-option på detta sätt:

<Autocomplete
      ...
      value={typeof value === 'string' ? options.find(o => o.name === value) : (value || null)}
    />

Ditt textarea-problem uppstår eftersom ditt värde som standard är undefined och material betraktar textarea som en okontrollerad inmatning, för att lösa det kan du skicka en tom sträng när värdet är undefined, på detta sätt:

<TextField
        ...
        value={value || ''}
        ...
  />