javascript - TypeError：无法读取未定义的属性“值” - React-typeahead

Question

我正在使用react-bootstrap-typeahead组件来预测用户对文本框的输入，但我无法设置状态，因此用户可以单击下拉菜单中的选择。这里

到目前为止，我的代码在这里。该函数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",
                      security_type: "Stock"
                    },
                    {
                      "": 2,
                      ticker: "AAA",
                      security_type: "Stock"
                    },
                    {
                      "": 3,
                      ticker: "AAAU",
                      security_type: "Stock"
                    },
                    {
                      "": 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;

标签： javascriptreactjsstatetypeaheadreactstrap

Answer 1

建议，一种更好的使用箭头函数做事的方法，保留以下内容的上下文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"
};

工作演示： https ://codesandbox.io/s/confident-moore-wsq5p