如何解决TypeError:无法读取未定义的属性“值”-React-typeahead
我正在使用react-bootstrap-typeahead
组件来预测用户向文本框中的输入,但是我无法设置状态,因此用户可以在下拉菜单中单击选择。here
到目前为止,我的代码在这里。函数handleAddtask
在键入时将任务添加到任务列表,但是我无法将其分配给预输入下拉列表。 (我仍在学习反应,因此,对此的任何资源也将不胜感激。)
import React,{ Component } from "react";
import PropTypes from "prop-types";
import { Typeahead } from "react-bootstrap-typeahead";
class AddWatchlistForm extends Component {
constructor(props) {
super(props);
this.state = {
taskName: ""
};
this.handleAddTask = this.handleAddTask.bind(this);
}
static propTypes = {
newTask: PropTypes.func.isrequired
};
render() {
return (
<div className="row">
<div className="col-md-6 col-md-offset-3">
<div style={{ margin: "20px" }}>
<div className="row">
<div className="col-md-6">
<Typeahead
placeholder=""
onChange={e => this.updateTaskName(e)}
onClick={(e => this.updateTask(e),this.handleAddTask)}
value={this.state.taskName}
onKeyPress={e => this.checkEnterKey(e)}
labelKey={option =>
`${option.ticker} ${option.security_type}`
}
options={[
{
"": 0,ticker: "A",security_type: "Stock"
},{
"": 1,ticker: "AA",{
"": 2,ticker: "AAA",{
"": 3,ticker: "AAAU",{
"": 4,ticker: "AACG",security_type: "Stock"
}
]}
/>
</div>
<div className="col-md-4">
<button
type="button"
className="btn btn-primary"
onClick={this.handleAddTask}
>
{" "}
Add New...{" "}
</button>
</div>
</div>
</div>
</div>
</div>
);
}
checkEnterKey(e) {
var keyCode = e.which || e.keyCode;
if (keyCode == 13) {
if (this.state.taskName.trim() !== "") {
this.props.newTask(this.state.taskName);
}
}
}
updateTaskName(e) {
this.setState({ taskName: e.target.value });
}
updateTask(e) {
this.setState({ taskName: e.target.options.ticker });
console.log(this.state);
}
handleAddTask(e) {
let name = e.target.value;
if (this.state.taskName.trim() !== "")
this.props.newTask(this.state.taskName);
}
}
export default AddWatchlistForm;
解决方法
建议,一种使用箭头函数保留this
上下文的更好方法:
删除以下内容...
constructor(props) {
super(props);
this.state = {
taskName: ""
};
this.handleAddTask = this.handleAddTask.bind(this);
}
handleAddTask(e) {
let name = e.target.value;
if (this.state.taskName.trim() !== "")
this.props.newTask(this.state.taskName);
}
并添加它:
state = {
taskName: ""
};
handleAddTask = e => {
let name = e.target.value;
if (this.state.taskName.trim() !== "")
this.props.newTask(this.state.taskName);
}
由于TypeError
而得到undefined
的原因也是相同的原因。我只是尝试将所有普通功能替换为箭头功能,现在它们都正常工作。否则,您应该为每个单个类属性函数绑定到this
,这是一个繁琐的双重过程,并且会占用大量性能。
此外,在handleAddTask
函数中,请更新:
handleAddTask = e => {
let name = e.target.value;
if (this.state.taskName.trim() !== "")
this.props.newTask(name);
};
解决方案
问题出在传递给e
的地方。将您的updateTaskName
函数更改为:
updateTaskName = e => {
this.setState({ taskName: e.length > 0 ? e[0].security_type : "" });
};
这是因为e
是:
e = {
"": 2,ticker: "AAA",security_type: "Stock"
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。