javascript - Rensa inmatningstext vid knapptryckning

Jag har tre komponenter.

1. SearchBarInput som är en kontrollerad komponent baserad på Material UI OutlinedInput. Som props tar den onClickClear.
2. Input som renderar SearchBarInput och skickar till den onClickClear
3. App som renderar Input-komponenten och skickar till den en handleClickClear-funktion.

Kod: https://codesandbox.io/s/amazing-allen-fprpd

När användaren skriver något i Input visas en X-ikon. Om användaren klickar på den sätts inmatningens tillstånd till undefined. Därmed rensas tillståndet korrekt. Dock rensar det inte användargränssnittet för inmatningen från vad användaren har skrivit.

Det jag försöker uppnå är ett liknande beteende som <input type="search"> i vanlig html

Se :

Svar #1

Det handlar bara om den här funktionen här:

const handleClickClear = () => {
    setInputText(undefiend);
  };

i App.tsx behöver du ersätta den med den här här

const handleClickClear = () => {
    setInputText("");
  };

och vi har också skickat ner textInput-värdet från App.tsc hela vägen ner till SearchBarInput.tsx och lagt till det som ett värde i själva inputen

och du kan hitta min lösning här: https://codesandbox.io/s/cranky-payne-2727u?file=/src/App.tsx:377-436

Svar #2

Jag uppdaterade din kod i denna sandlåda. Jag slutade med att skicka inputText nedåt som en prop (lade till det i de nödvändiga gränssnitten) och använde det som värde för inputfältet. Du behöver också göra inputText till en tom sträng när du trycker på rensningsikonen. Om det är undefined uppdateras inte inputkomponenten. Se nedan.

App.tsx

...

 const handleClickClear = () => {
    setInputText("");
  };

  return (
    <div className="App">
      <Input
        showClearIcon={!!inputText}
        onSearchBarChange={(event) => handleSearchBarChange(event)}
        onClickClear={handleClickClear}
        inputText={inputText}
      />
      <br />
      <p>My text: {inputText} </p>
    </div>

Därefter deklarerar du inputText som en prop i gränssnitten i barnkomponenterna och skickar prop:en vidare till barnkomponenterna.

interface Props {
  ...
  inputText: string | undefined;
  ...
}

Slutligen, lägg till det som värdet som skickas till OutlinedInput i SearchBarInput.

SearchBarInput.tsx

  <OutlinedInput
      type="text"
      value={inputText}
      onChange={onChange}
   ...
   />