web-dev-qa-db-fra.com

Comment utiliser onchange avec l'interface utilisateur matérielle à saisie semi-automatique?

Avec la méthode handleChange est géré l'événement OnChange du style Entrée de formulaire avec Hooks qui définit l'état de l'objet.

La fonction handleChange appelle à son tour setLocation qui met à jour l'état de l'emplacement avec la nouvelle valeur.

Pour faciliter la saisie des données utilisateur, j'ai décidé de changer le champ de la ville en une saisie semi-automatique, mais je n'ai pas réussi à capturer la valeur de la saisie semi-automatique. Dans la documentation il me dit que je dois passer deux arguments mais je ne comprends pas très bien

function(event: object, value: any) => void
event: The event source of the callback
value: null

Comment puis-je accéder à la valeur du champ et le mettre dans ma fonction pour insérer les données?

        <Autocomplete
        style={{ width: 300 }}
        value={location.City}
        onChange={handleChange}
        options={list.City}
        classes={{
          option: classes.option,
        }}
        autoHighlight
        getOptionLabel={option => typeof option === 'string' ? option : option.City}
        renderOption={option => (
          <React.Fragment>

            {option.City} -{option.State}
          </React.Fragment>
        )}

         renderInput={params => (
           <TextField {...params} label="City"  value={location.City}  margin="normal" variant="outlined" style={{ width: 220 }} inputProps={{
             ...params.inputProps,
             autoComplete: 'disabled', // disable autocomplete and autofill
           }}/>
         )}
       />
reactjsautocompletematerial-uireact-hooks
3
Emm

Si vous essayez simplement d'obtenir la valeur de l'entrée lorsque l'utilisateur tape, vous devez utiliser onInputChange. Le gestionnaire onChange s'exécute lorsque l'utilisateur sélectionne une option dans la liste déroulante.

export default function ComboBox() {
  function handleInputChange(event, value) {
    console.log(value);
  }

  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option: FilmOptionType) => option.title}
      style={{ width: 300 }}
      onInputChange={handleInputChange}
      renderInput={params => (
        <TextField {...params} label="Combo box" variant="outlined" fullWidth />
      )}
    />
  );
}

Codesandbox

1
Barryman9000

la réaction SyntheticEvent a défini une cible nulle dans une requête asynchrone, essayez d'utiliser

event.persist ()

sur l'événement

https://reactjs.org/docs/events.html#event- Covoiturage

 const handleOnChangeText=(event)=> {     
    event.persist();
    console.log(event)    
    let active = true;
    setOpen(true);
    if (!loading) {
      return undefined;
    }
    (async () => {
      const response = await fetch('https://country.register.gov.uk/records.json?page-size=5000');
      await sleep(1e3); // For demo purposes.
      const countries = await response.json();
      if (active) {
        setOptions(Object.keys(countries).map(key => countries[key].item[0]) as CountryType[]);
      }
      active = false;
    })();   
}



<Autocomplete
      id="comboboxAsync"
      disableOpenOnFocus
      style={{ width: 300 }}
      open={open}
      onInputChange={handleOnChangeText}
...
0
Eyder Cauich

Vous pouvez utiliser mui-autocomplete npm son codage facile et moins avec plus d'options (comme les appels asynchrones de vue avatar). Vous devriez l'essayer. Voici l'exemple pour plus d'informations, visitez ici. [ http://mui-autocomplete.com/home]

`import React from 'react';
 import MuiAutocomplete from 'mui-autocomplete';
 const cities = [
 {
   id: 1,
   name: "Alabama",
   code: "AL"
 },
 {
   id: 2,
   name: "Alaska",
   code: "AK"
 },
 {
   id: 3,
   name: "American Samoa",
   code: "AS"
 }];
 function Home () {
   return (
     <div>
      <MuiAutocomplete
       placeholder="Countries"
       name="countries"
       setvalue={1}
       setdata={cities}
       variant="outlined"
       template={{
        title: 'name'
       }}
      />
    </div>
    );
 }`
0
Harinder88