Javascript 在React JS中使用一个onChange处理程序和无名称属性处理动态文本输入

在没有预定义name属性的情况下，我很难跟踪多个onChange事件。从现在起，一个文本输入将控制所有输入。我见过几个静态输入或一个输入工作的例子，但没有看到多个动态输入的例子

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { updateCartItem, removeCartItem } from '../shared/actions'

class CheckoutContainer extends Component {
    state = {
        value: ''
    }

    handleChange(event) {
        const target = event.target
        const value = target.value
        this.setState({ value: value })
    }

    render() {
        const cartItems = this.props.cartItems
        const { value } = this.state
        return (
                <div className='checkout-container'>
                    {cartItems && cartItems.map((cart, i) =>
                        <div key={i} className='checkout-item'>
                            <input
                                type='text'
                                maxLength='2'
                                placeholder={cart.itemUnits}
                                value={value}
                                onChange={this.handleChange.bind(this)}
                            />
                        </div>
                    )}
                </div>
        )
    }
}

const mapStateToProps = (state) => ({
    cartItems: state.cartReducer.cartItems
})

export default withRouter(connect(mapStateToProps, null)(CheckoutContainer)

import React，{Component}来自“React”
从“react redux”导入{connect}
从“react router dom”导入{withRouter}
从“../shared/actions”导入{UpdateCarItem，RemoveCarItem}
类CheckoutContainer扩展组件{
状态={
值：“”
}
手变（活动）{
const target=event.target
常量值=target.value
this.setState（{value:value}）
}
render（）{
const cartItems=this.props.cartItems
const{value}=this.state
返回(
{cartItems&&cartItems.map（（购物车，i）=>
)}
)
}
}
常量mapStateToProps=（状态）=>({
cartItems:state.cartReducer.cartItems
})
使用路由器导出默认值（连接（mapStateToProps，null）（签出容器）

您可以从

onChange

处理程序向

handleChange

传递附加值

class CheckoutContainer extends Component {
    state = {
        value: ''
    }

    handleChange = (event, cart) => {
         // here you have access to cart
        this.setState({ [cart.name]: event.target.value })
    }

    render() {
        const cartItems = this.props.cartItems
        const { value } = this.state
        return (
                <div className='checkout-container'>
                    {cartItems && cartItems.map((cart, i) =>
                        <div key={i} className='checkout-item'>
                            <input
                                type='text'
                                maxLength='2'
                                placeholder={cart.itemUnits}
                                value={value}
                                onChange={(event)=> this.handleChange(event, cart)}
                            />
                        </div>
                    )}
                </div>
        )
    }
}

类签出容器扩展组件{
状态={
值：“”
}
handleChange=（事件、购物车）=>{
//在这里您可以访问购物车
this.setState（{[cart.name]：event.target.value}）
}
render（）{
const cartItems=this.props.cartItems
const{value}=this.state
返回(
{cartItems&&cartItems.map（（购物车，i）=>
this.handleChange（事件、购物车）}
/>
)}
)
}
}

根据您的数据结构，您可以为输入命名

class CheckoutContainer extends React.Component {
  state = {};

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

  render() {
    const { value } = this.state;
    return (
      <div className="checkout-container">
        {cartItems &&
          cartItems.map((cart, i) => (
            <div key={i} className="checkout-item">
              <label>{cart.item}</label>
              <input
                type="text"
                maxLength="2"
                name={cart.item}
                placeholder={cart.itemUnits}
                value={value}
                onChange={this.handleChange}
              />
            </div>
          ))}
      </div>
    );
  }
}

类CheckoutContainer扩展React.Component{
状态={}；
handleChange=e=>{
常量{name，value}=e.target；
this.setState（{[name]：value}）；
};
render（）{
const{value}=this.state；
返回(
{cartItems&&
cartItems.map（（购物车，i）=>(
{cart.item}
))}
);
}
}

这一行程序状态={}；解决了所有问题。谢谢！