Malzeme tamamlamasından Otomatik Tamamlama Bileşenindeki tutamaç değişimi

AutocompleteGiriş etiketleri için bileşen kullanmak istiyorum . Ben daha sonra veritabanına kaydedebilirsiniz böylece etiketleri almak ve onları bir devlet kaydetmek için çalışıyorum. Tepki içinde sınıflar yerine fonksiyonları kullanıyorum. Ben denedim onChangeama sonuç alamadım.

<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 />)} />

Yuki'nin daha önce de belirttiği gibi, onChangeişlevi doğru şekilde kullandığınızdan emin olun . İki parametre alır. Belgelere göre:

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

event: Geri aramanın olay kaynağı

value: null (Otomatik Tamamlama bileşenindeki değer / değerler).

İşte bir örnek:

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 },
];

onChangeDoğru kullandığınızdan emin misiniz ?

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

@Dworo

Giriş alanındaki açılır menüden seçilen bir öğeyi görüntüleme sorunu olan herkes için.

Bir çözüm buldum. Temel olarak bir bağlamak zorunda inputValuede onChageher ikisi için Autocompleteve TextFieldboktan Malzeme UI.

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
                  />
                )}
                />

Yukarıdaki kodu kullanarak, hala seçilen seçeneği görüntülemek için otomatik tamamlama kutusunu alamıyorum .. Herhangi bir fikir çocuklar?

Etiketlerimi arka uçtan almak için her giriş değişikliğinde API'mi vurmam gerekiyordu!

Her giriş değişikliğinde önerilen etiketlerinizi almak istiyorsanız Material-ui onInputChange kullanın!

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
              />

Otomatik tamamlamadan bir seçenek belirlediğimde durumumu güncellemek istedim. Tüm girişleri yöneten global bir onChange işleyicim vardı

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

Bu, alanın adını temel alarak nesneyi dinamik olarak güncelleştirir. Ancak Otomatik Tamamlama'da ad boş döner. Bu yüzden işleyiciyi yerine olarak onChangedeğiştirdim onSelect. Sonra değişikliği işlemek için ayrı bir işlev oluşturun ya da benim durumumda olduğu gibi adın geçip geçmediğini kontrol etmek için bir if ifadesi eklendi.

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

Tek bir otomatik tamamlama varsa yukarıdaki yaklaşım işe yarar. Birden fazla u'nuz varsa aşağıdaki gibi özel bir işlevi geçirebilirsiniz

<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:
    }
  };