无法使用从材料ui中选择项目来获取event.target.value

Question

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

我尝试添加autoSelect={true}

我还尝试将这行代码移动到文本区域
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可以用来记录点击的项目！

Answer 1

编辑：使用e.target.textContent即可
这里有一个实时的Codesandbox来检查代码(修改了一些部分，应用了下面的提示和其他一些东西(。

---

不要像这样手动改变状态：

this.state.itemSelected = true

使用setState(就像你已经在为其他状态项做的那样(：

updateState(e) {
this.setState({ inputVal: e.target.value, itemSelected: true });
console.log(e.target.value);
// eventually I want to render a DIV with data from the selected value
}

还有一个提示，你可以使用数组销毁：

const {isLoaded, itemSelected} = this.state;

代替

var isloaded = this.state.isLoaded;
var itemSelected = this.state.itemSelected;

Answer 2

onChange签名：函数(事件：对象，值：任意(=>作废

这里有一个例子：

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