javascript - 自动完成文本字段中不显示所选选项

Question

在我的代码中，我试图在基于https://www.youtube.com/watch?v=zT62eVxShsY&t=176s的多步骤/表单应用程序中创建类似于搜索栏的内容。请看下面的代码。

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar/AppBar';
import AutoComplete from 'material-ui/AutoComplete';
import Container from '@material-ui/core/Container';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Avatar from 'material-ui/Avatar';
import RaisedButton from 'material-ui/RaisedButton';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import Select from 'react-select';
import TextField from '@material-ui/core/TextField';
import { Autocomplete } from '@material-ui/lab';



 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: 'Monty Python and the Holy Grail', year: 1975 },
];

export class SearchStudent extends Component{

  constructor(props) {
    super(props);
    this.state = {value:0};
  }


  continue = e => {
    e.preventDefault();
    this.props.nextStep();
  }
  back = e => {
    e.preventDefault();
    this.props.prevStep();
  }




onTagsChange = (event, values) => {
    const { handleChange} = this.props;
    handleChange('searchKeyword',values)

  }





  render() {
    const { values, handleChange} = this.props;
    return(

      <MuiThemeProvider>
        <React.Fragment >

          <AppBar
          position='Fixed'
          style={{top:'auto'}}
          />

          <div>

              <Paper style={{margin:'5%',marginTop:'0', opacity:0.9, paddingTop:'0.5%', paddingLeft:'5%', paddingRight:'5%', paddingBottom:'5%'}}>
              <Grid container spacing={1}>


              <Grid item xs={12}>
              <h3>title xxxxx</h3>
              </Grid>
              <Grid item xs={12}>



              <Autocomplete
                disableClearable='true'
                disableOpenOnFocus="true"
                options={top100Films}
                getOptionLabel={option => option.title}
                onChange={this.onTagsChange}
                renderTags={() => {}}

                renderInput={params => (
                  <TextField
                    {...params}
                    variant="standard"
                    margin="normal"
                    fullWidth
                  />
                )}
                />
                <TextField fullWidth="true" value={values.searchKeyword.fname+' '+ values.searchKeyword.lname+' '+values.searchKeyword.stu_id}/>


                  <Grid item xs={12}>
                  <RaisedButton fullWidth style={{height:60, marginTop:'10%'}} label="Next" primary={true} onClick={this.continue}/>
                    </Grid>

                    <Grid item xs={12} style={{ marginTop: 10}}>
                    <RaisedButton fullWidth label="Back" secondary={true} onClick={this.back}/>
                      </Grid>

                      </Grid>

</Grid>
              </Paper>



          </div>
  </React.Fragment>

      </MuiThemeProvider>
    )
  }
}


export default SearchStudent

然而; 一旦做出选择，自动完成中选择的值不会显示在自动完成文本字段中。但是，所有其他功能都在工作，并且对象已分配给状态。请帮助在自动完成文本字段中反映所选选项

标签： javascriptcssreactjssearchautocomplete