React JS - нужна помощь с настройкой состояния того же, но повторяющегося поля ввода в таблице - PullRequest
Новая
       19

React JS - нужна помощь с настройкой состояния того же, но повторяющегося поля ввода в таблице

0 голосов
/ 08 июня 2019

У меня есть таблица с каждой строкой, имеющей одно поле ввода «количество продукта» (type = «number»), которое повторяется с использованием функции .map (). Но всякий раз, когда я обновляю значение единицы, используя {this.state.value}, оно устанавливает одинаковое значение для всех полей ввода. 

class TableRow extends React.Component {
    constructor(props) {
    super(props); 
    this.state = {
        qty: 0
    };
}

handleChange(e, items, i) {
    this.setState({
        qty: e.target.value
    });
}
render() {
    var rowData = this.props.data.map((item, index) => {
        return(
            <tr key={item.ProductId}>
                <td>{item.Name}</td>
                <td>{item.Description}</td>
                <td>{(item.Quantity > 0)? item.Status: "Out of Stock"}</td>
                <td><input type="number" name="productQuantity" value={this.state.qty} onChange={(e) => { this.handleChange(e, this.props.data, index) }} style={{width: '45px', textAlign: 'center' }} /></td>
                <td><strong><span className="tblCurrency">{item.CurrencyCode}</span> <span className="tblPrice" ref="tblPrice">{item.Price}</span></strong></td>
                <td><strong><span className="itemsPrice">{item.Price * this.state.qty}</span></strong></td>
            </tr>
        )
    });

    return(<tbody>{rowData}</tbody>)
}
}

Текущая функциональность здесь - https://jsfiddle.net/1anLz72v/39/

Ожидаемый результат должен обновлять поле ввода и общую стоимость только для текущей строки.

1 Ответ

1 голос
/ 08 июня 2019

Может заменить ваш код следующим кодом: 

class TableRow extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      data: this.props.data,
      qty: Array(this.props.data.length).fill(1)
    };
  }

  handleChange(e, items, i) {
    let tempQty = this.state.qty;
    tempQty[i] = e.target.value;
    this.setState({
      qty: tempQty
    });
  }

  render() {
    var rowData = this.state.data.map((item, index) => {
      return(
          <tr key={item.ProductId}>
            <td>{item.Name}</td>
            <td>{item.Description}</td>
            <td>{(item.Quantity > 0)? item.Status: "Out of Stock"}</td>
            <td><input type="number" name="productQuantity" value={this.state.qty[index]} onChange={(e) => { this.handleChange(e, this.state.data, index) }} style={{width: '45px', textAlign: 'center' }} /></td>
            <td><strong><span className="tblCurrency">{item.CurrencyCode}</span> <span className="tblPrice" ref="tblPrice">{item.Price}</span></strong></td>
            <td><strong><span className="itemsPrice">{item.Price * this.state.qty[index]}</span></strong></td>
          </tr>
      )
    });

    return(<tbody>{rowData}</tbody>)
  }
}

Я создал один временный qty нулевой массив с длиной, равной вашим данным, потому что когда вы изменяете что-то с определенным индексом, вы можете изменитьтолько этот индекс, так что вы получите точное значение.

...