Question

我在没有预先定义name属性的情况下无法跟踪多个onChange事件。截至目前，一个文本输入将控制所有输入。我看到了几个带有静态输入或一个输入正常工作的示例，但没有多个带有动态输入的示例。

license

Answer 1

您可以将其他值从handleChange处理程序传递到onChange

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

Answer 2

根据您的数据结构，您可以给输入一个名称。

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

在React JS中使用一个onChange处理程序处理动态文本输入而没有名称属性

2 个答案: