Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

245
Vistas
How to clear TextField after ENTER key press in React

I am using Mui component TextField in TypeSCript and I want to clear TextField after ENTER key is pressed.

Here is my code snippet

<TextField
      {...params}
      autoFocus
      className="SymbolInput"
      onChange={(e) => {
       setSearchTerm(e.target.value);
        handleInputdebounced(e.target.value);
      }}
      onBlur={clearState}
      onFocus={() => setSearchResults([])}
      placeholder="Add symbols"
      name="searchname"
      onKeyPress={(e) => {
        if (e.key === 'Enter') {
          onPressEnter();
          setSearchTerm('');
        }
      }}
      InputProps={{
        ...params.InputProps,
        type: 'search',
        sx: { pb: '2px', pt: '2px'  },
        endAdornment: (
          <InputAdornment position="end" sx={{width:0}}>
            {loading ? <CircularProgress color="inherit" size={20} /> : <SearchIcon />}
          </InputAdornment>
        ),
      }}
      inputProps={{
        ...params.inputProps,
        sx: { textTransform: 'uppercase', },
      }}
    />

const onPressEnter = async () => {
  if (searchTerm && searchTerm.length > 0) {
    onAddSymbol(searchTerm);
  }
};

const handleSearchChange = async (searchTerm: string) => {
const searchValue = searchTerm;
//Check if there are any previous pending requests
if (typeof autoCompleteCancelToken != typeof undefined) {
  autoCompleteCancelToken?.cancel('Operation canceled due to new request.');
}
//Save the cancel token for the current request
autoCompleteCancelToken = axios.CancelToken.source();
if (searchValue && searchValue.length > 0) {
  setLoading(true);
  setSearchTerm(searchTerm);
  const response = await companyLookup(searchTerm, { cancelToken: autoCompleteCancelToken?.token });
  if (!response.hasErrors) {
    setSearchResults(response.data || []);
  }
  setGetValue(searchValue);
  setEditable(false);
  setLoading(false);
}
if (searchValue.length == 0) {
  setSearchResults([]);
}
};

const handleInputdebounced = useMemo(() => debounce(handleSearchChange, 200), []);

I am setting the value of textfield (searchTerm) in setSearchTersm useState but it is not working.

Can someone please help me on this?

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

<TextField
      {...params}
      value={searchTerm}
      autoFocus
      className="SymbolInput"
      onChange={(e) => {
       setSearchTerm(e.target.value);
        handleInputdebounced(e.target.value);
      }}
      onBlur={clearState}
      onFocus={() => setSearchResults([])}
      placeholder="Add symbols"
      name="searchname"
      onKeyPress={(e) => {
        if (e.key === 'Enter') {
          onPressEnter();
          setSearchTerm('');
        }
      }}
      InputProps={{
        ...params.InputProps,
        type: 'search',
        sx: { pb: '2px', pt: '2px'  },
        endAdornment: (
          <InputAdornment position="end" sx={{width:0}}>
            {loading ? <CircularProgress color="inherit" size={20} /> : <SearchIcon />}
          </InputAdornment>
        ),
      }}
      inputProps={{
        ...params.inputProps,
        sx: { textTransform: 'uppercase', },
      }}
    />

Just add a value property to TextField and assign it to searchTerm( searchTerm is the state variable ). I hope this solves your issue . Please upvote if it does :)

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda