Gérer le changement du composant de saisie semi-automatique à partir du matériau ui

Je veux utiliser un Autocompletecomposant pour les balises d'entrée. J'essaie d'obtenir les balises et de les enregistrer sur un état afin de pouvoir les enregistrer plus tard dans la base de données. J'utilise des fonctions au lieu de classes dans React. J'ai essayé avec onChange, mais je n'ai obtenu aucun résultat.

<div style={{ width: 500 }}>
    <Autocomplete
        multiple
        options={autoComplete}
        filterSelectedOptions
        getOptionLabel={option => option.tags}
        renderInput={params => (<TextField
                className={classes.input}
                {...params}
                variant="outlined"
                placeholder="Favorites"
                margin="normal"
                fullWidth />)} />

Comme Yuki l'a déjà mentionné, assurez-vous que vous avez bien utilisé la onChangefonction. Il reçoit deux paramètres. Selon la documentation:

Signature : function(event: object, value: any) => void.

event: La source d'événement du rappel

value: null (valeur / valeurs dans le composant de saisie semi-automatique).

Voici un exemple:

import React from 'react';
import Chip from '@material-ui/core/Chip';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';

export default class Tags extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tags: []
    };
    this.onTagsChange = this.onTagsChange.bind(this);
  }

  onTagsChange = (event, values) => {
    this.setState({
      tags: values
    }, () => {
      // This will output an array of objects
      // given by Autocompelte options property.
      console.log(this.state.tags);
    });
  }

  render() {
    return (
      <div style={{ width: 500 }}>
        <Autocomplete
          multiple
          options={top100Films}
          getOptionLabel={option => option.title}
          defaultValue={[top100Films[13]]}
          onChange={this.onTagsChange}
          renderInput={params => (
            <TextField
              {...params}
              variant="standard"
              label="Multiple values"
              placeholder="Favorites"
              margin="normal"
              fullWidth
            />
          )}
        />
      </div>
    );
  }
}

const top100Films = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },
  { title: 'The Godfather: Part II', year: 1974 },
  { title: 'The Dark Knight', year: 2008 },
  { title: '12 Angry Men', year: 1957 },
  { title: "Schindler's List", year: 1993 },
  { title: 'Pulp Fiction', year: 1994 },
  { title: 'The Lord of the Rings: The Return of the King', year: 2003 },
  { title: 'The Good, the Bad and the Ugly', year: 1966 },
  { title: 'Fight Club', year: 1999 },
  { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },
  { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },
  { title: 'Forrest Gump', year: 1994 },
  { title: 'Inception', year: 2010 },
];

Êtes-vous sûr d'avoir utilisé onChangecorrectement?

onChange signature :function(event: object, value: any) => void

@Dworo

Pour toute personne qui a un problème avec l'affichage d'un élément sélectionné dans la liste déroulante du champ de saisie.

J'ai trouvé une solution de contournement. Fondamentalement, vous devez lier un inputValueat onChageà la fois Autocompleteet l' TextFieldinterface utilisateur matérielle merdique.

const [input, setInput] = useState('');

<Autocomplete
  options={suggestions}
  getOptionLabel={(option) => option}
  inputValue={input}
  onChange={(e,v) => setInput(v)}
  style={{ width: 300 }}
  renderInput={(params) => (
    <TextField {...params} label="Combo box" onChange={({ target }) => setInput(target.value)} variant="outlined" fullWidth />
  )}
/>

  <Autocomplete
                disableClearable='true'
                disableOpenOnFocus="true"
                options={top100Films}
                getOptionLabel={option => option.title}
                onChange={this.onTagsChange}
                renderInput={params => (
                  <TextField
                    {...params}
                    variant="standard"
                    label="Favorites"
                    margin="normal"
                    fullWidth
                  />
                )}
                />

Lors de l'utilisation du code ci-dessus, je ne parviens toujours pas à obtenir la case de saisie semi-automatique pour afficher l'option sélectionnée. Des idées les gars?

J'avais besoin d'appuyer sur mon api à chaque changement d'entrée pour obtenir mes balises du backend!

Utilisez Material-ui onInputChange si vous voulez obtenir vos balises suggérées à chaque changement d'entrée!

this.state = {
  // labels are temp, will change every time on auto complete
  labels: [],
  // these are the ones which will be send with content
  selectedTags: [],
}
}

//to get the value on every input change
onInputChange(event,value){
console.log(value)
//response from api
.then((res) => {
      this.setState({
        labels: res
      })
    })

}

//to select input tags
onSelectTag(e, value) {
this.setState({
  selectedTags: value
})
}


            <Autocomplete
            multiple
            options={top100Films}
            getOptionLabel={option => option.title}
            onChange={this.onSelectTag} // click on the show tags
            onInputChange={this.onInputChange} //** on every input change hitting my api**
            filterSelectedOptions
            renderInput={(params) => (
              <TextField
                {...params}
                variant="standard"
                label="Multiple values"
                placeholder="Favorites"
                margin="normal"
                fullWidth
              />

Je voulais mettre à jour mon état lorsque je sélectionne une option dans la saisie semi-automatique. J'avais un gestionnaire onChange global qui gère toutes les entrées

         const {name, value } = event.target;
         setTukio({
          ...tukio,
          [name]: value,
        });

Cela met à jour l'objet dynamiquement en fonction du nom du champ. Mais sur la saisie semi-automatique, le nom revient vide. J'ai donc changé le gestionnaire de onChangeen onSelect. Ensuite, créez une fonction distincte pour gérer la modification ou, comme dans mon cas, ajoutez une instruction if pour vérifier si le nom n'est pas transmis.

// This one will set state for my onSelect handler of the autocomplete 
     if (!name) {
      setTukio({
        ...tukio,
        tags: value,
      });
     } else {
      setTukio({
        ...tukio,
        [name]: value,
      });
    }

L'approche ci-dessus fonctionne si vous avez une seule saisie semi-automatique. Si vous en avez plusieurs, vous pouvez passer une fonction personnalisée comme ci-dessous

<Autocomplete
    options={tags}
    getOptionLabel={option => option.tagName}
    id="tags"
    name="tags"
    autoComplete
    includeInputInList
    onSelect={(event) => handleTag(event, 'tags')}
          renderInput={(params) => <TextField {...params} hint="koo, ndama nyonya" label="Tags" margin="normal" />}
        />

// The handler 
const handleTag = ({ target }, fieldName) => {
    const { value } = target;
    switch (fieldName) {
      case 'tags':
        console.log('Value ',  value)
        // Do your stuff here
        break;
      default:
    }
  };