Reactjs 从material ui 处理自动完成组件的更改

发布于11月04日

我想用Autocomplete个组件作为输入标签.我正在try 获取标签并将其保存到一个状态，以便以后可以将其保存到数据库中.我在react中使用函数而不是类.我try 了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>;

推荐答案

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

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