Menangani perubahan pada Komponen Autocomplete dari material ui

Saya ingin menggunakan Autocompletekomponen untuk tag input. Saya mencoba untuk mendapatkan tag dan menyimpannya dalam keadaan sehingga saya nanti dapat menyimpannya di database. Saya menggunakan fungsi alih-alih kelas dalam bereaksi. Saya memang mencoba onChange, tetapi saya tidak mendapatkan hasil apa pun.

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

Seperti yang Yuki sebutkan, pastikan Anda menggunakan onChangefungsinya dengan benar. Ini menerima dua parameter. Menurut dokumentasi:

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

event: Sumber acara dari callback

value: null (Nilai / nilai dalam komponen Autocomplete).

Ini sebuah contoh:

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

Apakah Anda yakin menggunakan onChangedengan benar?

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

@Dworo

Bagi siapa pun yang memiliki masalah dengan menampilkan item yang dipilih dari dropdown di bidang Input.

Saya menemukan solusi. Pada dasarnya Anda harus mengikat inputValueat onChageuntuk keduanya Autocompletedan TextField, UI Bahan menyebalkan.

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

Setelah menggunakan kode di atas, saya masih tidak bisa mendapatkan kotak autocomplete untuk menampilkan opsi yang dipilih .. Ada ide?

Saya perlu menekan api saya pada setiap perubahan input untuk mendapatkan tag saya dari backend!

Gunakan Material-ui diInputChange jika Anda ingin mendapatkan tag yang disarankan pada setiap perubahan input!

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

Saya ingin memperbarui status saya ketika saya memilih opsi dari autocomplete. Saya memiliki penangan onChange global yang mengelola semua input

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

Itu memperbarui objek secara dinamis berdasarkan nama bidang. Tetapi pada Autocomplete namanya mengembalikan kosong. Jadi saya mengubah handler dari onChangemenjadi onSelect. Kemudian buat fungsi terpisah untuk menangani perubahan atau seperti dalam kasus saya menambahkan pernyataan if untuk memeriksa apakah nama tersebut tidak disahkan.

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

Pendekatan di atas berfungsi jika Anda memiliki autocomplete tunggal. Jika Anda memiliki banyak, Anda dapat melewati fungsi khusus seperti di bawah ini

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