***来自建议的代码更新****** 我正在学习使用material-ui。我找不到将其与事件处理相结合的许多示例。我使用了自动完成功能和文本字段来创建建议的从API提取的数据列表。我可以呈现选定的列表，但是单击选择之一后，我无法获得单击的值传递给react类的成员函数。我需要将事件正确绑定到自动完成功能吗？我应该怎么做。我的代码中的第25行将事件目标记录到控制台，但始终为0（我假设为null）。如何将this.state.data的值设置为clicked选项？

我尝试添加autoSelect = {true}

我还尝试将这行代码移到textarea中。
onChange = {this.updateState}

import React from "react"
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';

class App extends React.Component {


    constructor(props) {
        super(props);

        this.state = {
            data: null,isLoaded: false,itemSelected: false,inputVal: ''}

            this.updateState = this.updateState.bind(this)

        };

        updateState(e) {
            e.persist()
            const newValue = e.target.value
            this.setState({inputVal: newValue,itemSelected: true});
            console.log(e.target.value);

            // eventually I want to render a DIV with data from the selected value
        }

        /// fetch some data

    componentDidmount() {
        fetch('http://jsonplaceholder.typicode.com/posts')
            .then(response => response.json())
            /* .then(json => console.log(json)) */

            .then(data => this.setState({data,isLoaded: true}));
    }

    render() {

        const {isLoaded,itemSelected} = this.state;




        if (!isLoaded) {
            return <div> loading ...</div>;
        } else if (itemSelected) {
            return <div> item selected </div>
        } else {
            const limo = this.state.data;
            return (
                <div>

                    <Autocomplete
                        freeSolo
                        disableclearable
                        autoSelect={true}
                        id = "limoSelect"
                        onChange={this.updateState}
                        value = {this.state.inputVal}
                        options={limo.map(option => "body: '" + option.body + '\n' + "'      id: " + option.id)}
                        renderInput={params => (

                            <TextField
                                {...params}
                                label="Type In Content"
                                id="limoText"
                                value = ''
                                autoSelect={true}
                                margin="normal"
                                variant="outlined"
                                fullWidth
                                InputProps={{...params.InputProps,type: 'search'}}

                            />


                        )}
                    />
                </div>
            );

        }
    }
}

App.defaultProps = {}

export default App;

控制台记录为零。 当您单击选项时，将调用updateState并设置此变量 this.state.itemSelected = true; 没有错误信息。 我希望可以通过updateState中的console.log来记录单击的项目！