Question

我正在创建一个简单的CRUD React应用程序，让您管理产品。产品仅包含name和price。

在我的AddProduct组件中，我的onSubmit方法可以成功登录this.nameInput.value, this.priceInput.value，但是当我将日志更改为this.props.onAdd时，我得到了this.props.onAdd is not a function。

我正在跟踪tutorial，因此可以肯定我遗漏了一件小事，但是可以在我的代码上使用另一组观点。

这是我的addProduct组件-onSubmit方法具有this.props.onadd(...)：

import React, { Component } from 'react';

class AddProduct extends Component {
  constructor(props) {
    super(props);

    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(event) {
    event.preventDefault();

    this.props.onAdd(this.nameInput.value, this.priceInput.value);
  }
  render() {
    return (
        <form onSubmit={this.onSubmit}>
            <h3>Add Product</h3>
            <input placeholder="Name" ref={nameInput => this.nameInput = nameInput}/>
            <input placeholder="Price" ref={priceInput => this.priceInput = priceInput}/>
            <button>Add</button>
            <hr />
        </form>
    );
  }
}

这是我的App.js：

import React, { Component } from 'react';
import './App.css';
import ProductItem from './ProductItem';
import AddProduct from './AddProduct';


const products = [
  {
    name: 'iPad',
    price: 200
  },
  {
    name: 'iPhone',
    price: 500
  }
];

localStorage.setItem('products', JSON.stringify(products));


class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      products: JSON.parse(localStorage.getItem('products'))
    };

    this.onAdd = this.onAdd.bind(this);
    this.onDelete = this.onDelete.bind(this);
  }
  componentWillMount() {
    const products = this.getProducts();
    this.setState({ products });
  }

  getProducts() {
    return this.state.products;
  }

  onAdd(name, price) {
    const products = this.getProducts();

    products.push({
      name,
      price
    });

    this.setState({ products })
  }

  onDelete(name) {
    const products = this.getProducts();

    const filteredProducts = products.filter(product => {
      return product.name !== name;
    });

    this.setState({ products: filteredProducts });
  }

  render() {
    return (
      <div className="App">
        <h1>Products Manager</h1>

        <AddProduct

        />

        {
          this.state.products.map(product => {
            return (
             <ProductItem
                key={product.name}
                {...product}
                onDelete={this.onDelete}
              />
            );
          })
        }
      </div>
    );
  }
}

export default App;

我的代码有什么问题？单击添加按钮时，出现错误。

Answer 1

这是因为您没有将道具传递给渲染的<AddProduct />。

您应该这样添加它：

<AddProduct onAdd={this.onAdd}/>

Answer 2

您需要将道具传递给组件：

<AddProduct onAdd={onAdd}  />

Answer 3

只需更改以下行

到

<form onSubmit={this.onSubmit}>

Answer 4

onAdd是AddProduct道具中的一个字段。这意味着您应该向AddProduct中的App传递函数。像：<AddProduct onAdd={() => console.log('works')} />

为什么我得到“ this.props.onAdd不是函数”？

4 个答案: