reactjs - 处理 Material ui 中自动完成组件的更改

Question

我想对输入标签使用Autocomplete组件。我正在尝试获取标签并将它们保存在一个状态中，以便稍后可以将它们保存在数据库中。我在 react 中使用函数而不是类。我确实尝试过 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
      />
    )}
  />
</div>;

Answer 1

正如 Yuki 已经提到的，请确保您正确使用了 onChange 函数。它接收两个参数。根据文档:

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

event: The event source of the callback

value: null (The value/values within the Autocomplete component).

这是一个例子:

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