React添加联系人组件报错：undefined is not an object (evaluating 'e.target.element.contactName')

错误原因 #

你在handleAddContactFromSubmit方法里错误使用了e.target.element，表单的表单控件集合对应的属性是**elements（复数）**，而非element，这导致无法获取到输入框元素，从而抛出undefined is not an object的错误。

修复方案1：修正属性拼写 #

直接将代码中的e.target.element改为e.target.elements即可：

handleAddContactFromSubmit = (e) => {
  e.preventDefault();
  // 修正为 elements 复数形式
  const name = e.target.elements.contactName.value.trim();
  const email = e.target.elements.contactEmail.value.trim();
  const phone = e.target.elements.contactPhone.value.trim();
  this.props.handleAddContact({ name, email, phone });
};

修复方案2：使用React受控组件（推荐） #

React更推荐用受控组件管理表单状态，将输入框的值与组件state绑定，这更符合React的数据流模式，也避免直接操作DOM：

import React from "react";

class AddContact extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      errorMessage: undefined,
      successMessage: undefined,
      contactName: "",
      contactEmail: "",
      contactPhone: ""
    };
  }

  handleInputChange = (e) => {
    const { name, value } = e.target;
    this.setState({ [name]: value });
  };

  handleAddContactFromSubmit = (e) => {
    e.preventDefault();
    const { contactName, contactEmail, contactPhone } = this.state;
    const name = contactName.trim();
    const email = contactEmail.trim();
    const phone = contactPhone.trim();
    this.props.handleAddContact({ name, email, phone });
    // 提交后清空表单
    this.setState({ contactName: "", contactEmail: "", contactPhone: "" });
  };

  render() {
    const { contactName, contactEmail, contactPhone } = this.state;
    return (
      <div className="border col-12 text-white p-2">
        <form onSubmit={this.handleAddContactFromSubmit}>
          <div className="row p-2">
            <div className="col-12 text-white-50">Add a new Contact</div>
            <div className="col-12 col-md-4 p-1">
              <input
                className="form-control form-control-sm"
                placeholder="Name..."
                name="contactName"
                value={contactName}
                onChange={this.handleInputChange}
              />
            </div>
            <div className="col-12 col-md-4 p-1">
              <input
                className="form-control form-control-sm"
                placeholder="Email..."
                name="contactEmail"
                value={contactEmail}
                onChange={this.handleInputChange}
              />
            </div>
            <div className="col-12 col-md-4 p-1">
              <input
                className="form-control form-control-sm"
                placeholder="Phone..."
                name="contactPhone"
                value={contactPhone}
                onChange={this.handleInputChange}
              />
            </div>
            <div className="col-12 col-md-6 offset-md-3 p-1">
              <button className="btn btn-primary btn-sm form-control ">
                Create
              </button>
            </div>
          </div>
        </form>
      </div>
    );
  }
}
export default AddContact;

注：已修正输入框className中的拼写错误from-control为正确的form-control。

内容的提问来源于stack exchange，提问作者Alexandros Karamanolis