Question

在以下代码中，我在ref元素的<input/>处理程序中使用的<form>元素上设置了onSubmit。

由于某种原因，提交表单时出现以下错误：

TypeError：无法读取未定义的属性“值”

如何防止此错误？

import React from "react";

class AddItemForm extends React.Component {

  nameRef = React.createRef();

  createItem = event => {

    event.preventDefault();

    const item = {
      name: this.nameRef.value.value,      
    };  
  }

  render() {
    return (
      <form className="item-edit" onSubmit={this.createItem}>
        <input name="name" ref={this.nameRef} type="text" placeholder="Name" />        
        <button type="submit">+ Add Item</button>
      </form>
    );
  }
}

export default AddItemForm;

Answer 1

您需要用value替换第一个current，以确保ref对象可以通过该字段提供对底层DOM元素的访问。

以下方法可以解决您的问题：

createItem = event => {
    event.preventDefault();
    const item = {
       name: this.nameRef.current.value,      // Replace value with current 
    };
    console.log(item);      
}

ReactJS参考：获取输入元素值的未定义错误

1 个答案: