Xử lý thay đổi trên Thành phần tự động hoàn thành từ vật liệu ui

Tôi muốn sử dụng Autocompletethành phần cho các thẻ đầu vào. Tôi đang cố gắng để có được các thẻ và lưu chúng trên một trạng thái để sau này tôi có thể lưu chúng trên cơ sở dữ liệu. Tôi đang sử dụng các hàm thay vì các lớp trong phản ứng. Tôi đã thử với onChange, nhưng tôi không nhận được kết quả nào.

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

Như Yuki đã đề cập, hãy chắc chắn rằng bạn đã sử dụng onChangeđúng chức năng. Nó nhận được hai tham số. Theo tài liệu:

Chữ ký : function(event: object, value: any) => void.

event: Nguồn sự kiện của cuộc gọi lại

value: null (Giá trị / giá trị trong thành phần Tự động hoàn thành).

Đây là một ví dụ:

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

Bạn có chắc là bạn đã sử dụng onChangeđúng cách?

onChange chữ ký :function(event: object, value: any) => void

@Dworo

Đối với bất kỳ ai có vấn đề với việc hiển thị một mục được chọn từ danh sách thả xuống trong trường Nhập liệu.

Tôi tìm thấy một cách giải quyết. Về cơ bản, bạn phải liên kết một inputValuetại onChagecả hai Autocompletevà TextField, UI UI shitty.

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

Khi sử dụng đoạn mã trên, tôi vẫn không thể lấy hộp tự động hoàn thành để hiển thị tùy chọn đã chọn .. Bạn có ý tưởng nào không?

Tôi cần phải nhấn api của mình vào mỗi thay đổi đầu vào để lấy thẻ từ phụ trợ!

Sử dụng Material-ui onInputChange nếu bạn muốn nhận các thẻ được đề xuất cho mỗi thay đổi đầu vào!

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

Tôi muốn cập nhật trạng thái của mình khi tôi chọn một tùy chọn từ tự động hoàn tất. Tôi đã có một trình xử lý onChange toàn cầu quản lý tất cả các đầu vào

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

Điều đó cập nhật đối tượng động dựa trên tên của trường. Nhưng trên Autocomplete, tên trả về trống. Vì vậy, tôi đã thay đổi xử lý từ onChangesang onSelect. Sau đó, hoặc tạo một hàm riêng để xử lý thay đổi hoặc như trong trường hợp của tôi đã thêm một câu lệnh if để kiểm tra xem tên có được thông qua không.

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

Cách tiếp cận trên hoạt động nếu bạn có một tự động hoàn thành. Nếu bạn có nhiều u có thể vượt qua một chức năng tùy chỉnh như dưới đây

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