จัดการการเปลี่ยนแปลงในองค์ประกอบการเติมข้อความอัตโนมัติจากวัสดุ UI

ฉันต้องการใช้Autocompleteส่วนประกอบสำหรับแท็กอินพุต ฉันพยายามรับแท็กและบันทึกในสถานะดังนั้นฉันสามารถบันทึกในฐานข้อมูลในภายหลัง ฉันใช้ฟังก์ชั่นแทนการเรียนในปฏิกิริยา ฉันลองด้วยonChangeแต่ไม่ได้ผลลัพธ์ใด ๆ

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

ดังที่ยูกิพูดถึงไปแล้วตรวจสอบให้แน่ใจว่าคุณใช้onChangeฟังก์ชั่นอย่างถูกต้อง ได้รับสองพารามิเตอร์ ตามเอกสาร:

ลายเซ็น : function(event: object, value: any) => void.

event: แหล่งเหตุการณ์ของการติดต่อกลับ

value: null (ค่า / ค่าภายในองค์ประกอบการเติมข้อความอัตโนมัติ)

นี่คือตัวอย่าง:

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

คุณแน่ใจหรือว่าใช้onChangeอย่างถูกต้อง?

onChange ลายเซ็น :function(event: object, value: any) => void

@Dworo

สำหรับทุกคนที่มีปัญหาในการแสดงรายการที่เลือกจากดร็อปดาวน์ในฟิลด์อินพุต

ฉันพบวิธีแก้ปัญหา โดยทั่วไปคุณต้องผูกinputValueที่onChageสำหรับทั้งสองAutocompleteและTextField, shitty วัสดุ 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
                  />
                )}
                />

เมื่อใช้รหัสข้างต้นฉันยังคงไม่สามารถรับกล่องเติมข้อความอัตโนมัติเพื่อแสดงตัวเลือกที่เลือกได้ .. มีความคิดอะไรบ้าง

ฉันต้องการที่จะตี API ของฉันในทุกการเปลี่ยนแปลงการป้อนข้อมูลเพื่อรับแท็กของฉันจากแบ็กเอนด์!

ใช้ Material-ui onInputChange หากคุณต้องการได้รับแท็กที่แนะนำในทุกการเปลี่ยนแปลงของอินพุต!

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

ฉันต้องการอัปเดตสถานะของฉันเมื่อฉันเลือกตัวเลือกจากการเติมข้อความอัตโนมัติ ฉันมีตัวจัดการ onChange ทั่วโลกที่จัดการสำหรับอินพุตทั้งหมด

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

ที่ปรับปรุงวัตถุแบบไดนามิกตามชื่อของเขตข้อมูล แต่ในการเติมข้อความอัตโนมัติชื่อจะส่งกลับว่างเปล่า ดังนั้นผมจึงเปลี่ยนจากการจัดการเพื่อonChange onSelectจากนั้นสร้างฟังก์ชันแยกต่างหากเพื่อจัดการกับการเปลี่ยนแปลงหรือในกรณีของฉันเพิ่มคำสั่ง if เพื่อตรวจสอบว่าชื่อไม่ผ่าน

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

วิธีการข้างต้นใช้งานได้หากคุณมีการเติมข้อความอัตโนมัติเพียงครั้งเดียว หากคุณมีหลายคุณสามารถผ่านฟังก์ชั่นที่กำหนดเองเช่นด้านล่าง

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