时间戳

首页 > 解决方案 > ReactJS - 为每个元素添加一个输入字段并从中获取值

javascript - ReactJS - 为每个元素添加一个输入字段并从中获取值

问题描述

我正在制作“添加到购物车”功能。我的代码如下：

import React, { Component } from 'react';
import Items from '../json/items.json';

class AddToCart extends Component {

    putInCart(i) {
        // **** I WANT TO GET THE QUANTITY IN THIS FUNCTION ****
    }

    render() {

        return (
            <div>
                {
                    Items.items.map((val, ind) => {
                        return (
                            <div>
                                <p>Name : {val.name}</p>
                                <p>Price : {val.price}</p>
                                <p>Availability : {val.availability}</p>
                                <input placeholder="Quantity"></input>
                                <br />
                                <button onClick={() => this.putInCart(ind)}>Add to Cart</button>
                                <br /><br /><br />
                            </div>
                        );
                    })
                }
            </div>
        );
    }
}

export default AddToCart;

当用户单击“添加到购物车”按钮时，我想获取用户在我的“putInCart()”方法中的数量文本字段中输入的数量。但我不知道该怎么做。任何帮助，将不胜感激。

JSON文件：-

    {
     "items": [
       {
        "name": "Item 1",
        "price": "100",
        "availability": "In Stock",
       },
       {
        "name": "Item 2",
        "price": "50",
        "availability": "Out of Stock",
      },
      {
        "name": "Item 3",
        "price": "150",
        "availability": "In Stock",
      }
    ]
   }

标签： javascriptreactjs

解决方案

您需要将用户写入的数量存储在组件状态的属性中，

  1. 使用初始空字符串创建状态
  2. 将输入值绑定到此状态属性
  3. 在每次值更改时，您都会更新状态值
  4. 现在你可以在组件中任何你想要的地方获取状态值

src/App.js

import React, { Component } from "react";
import "./styles.css";
import Items from './items';

class AddToCart extends Component {
   constructor(props) {
     super(props);
     this.state = {
       1: "",
       2: "",
       3: ""
     };
     this.handleChange = this.handleChange.bind(this);
   }

    handleChange(e) {
      this.setState({ [e.target.name]: e.target.value });
    }


    putInCart(i) {
      console.log(this.state[i]);
    }

    render() {
        return (
            <div>
                {
                    Items.map((val, ind) => {
                        return (
                            <div key={ind}>
                                <p>Name : {val.name}</p>
                                <p>Price : {val.price}</p>
                                <p>Availability : {val.availability}</p>
                                <input placeholder="Quantity" name={ind} onChange={this.handleChange} value={this.state.inputValue}></input>
                                <br />
                                <button onClick={() => this.putInCart(ind)}>Add to Cart</button>
                                <br /><br /><br />
                            </div>
                        );
                    })
                }
            </div>
        );
    }
}

export default AddToCart;

src/items.js

export default [
    {
      "name": "Item 1",
      "price": "100",
      "availability": "In Stock",
    },
    {
      "name": "Item 2",
      "price": "50",
      "availability": "Out of Stock",
    },
    {
      "name": "Item 3",
      "price": "150",
      "availability": "In Stock",
    }
]

推荐阅读