javascript - ReactJS 引用号 : undefined error getting input element value

Question

在下面的代码中，我设置了 ref关于<input/> <form>期间使用的元素元素的onSubmit处理程序。

由于某种原因，我在提交表单时收到以下错误:

TypeError: Cannot read property 'value' of undefined

如何防止此错误？

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);      
}