Как я могу установить ссылки и назначить значения для зацикленных элементов в ReactJS

Question

У меня проблемы с установкой значений для зацикленных элементов в React.js

То, чего я пытаюсь достичь, это список предметов:

[{ id: 1, rate: 120 } ...]

Я хочу создать 4 текстовых поля: ставка, общая стоимость, аванс и баланс.

Общая стоимость рассчитывается с использованием тарифа и другого свойства объекта, размера (ставка * размер). Теперь при каждом изменении ставки я хочу рассчитать общую стоимость и назначить ее в текстовое поле общей стоимости соответствующей строки. Кроме того, при первой загрузке текстовые поля должны быть предварительно заполнены этими рассчитанными значениями.

array.forEach((item) => {
  <div>
    <input type="text" ref/id={`item_r_${item.id}`} /> // Rate
    <input type="text" ref/id={`item_r_${item.id}`} /> // Total Cost
    <input type="text" ref/id={`item_r_${item.id}`} /> // Advance
    <input type="text" ref/id={`item_r_${item.id}`} /> // Balance
  </div>
})

Как мне этого добиться?

Я пытался использовать ссылки, но не смог заставить их работать.

Спасибо!

Answer 1

У меня есть решение без использования refs, оно обновляет значение inputs с их индексом.

UPDATE

Расчет аванса и баланса добавлен в функции calculateBalance и onChangeAdv соответственно.

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      data: [
        { id: 1, rate: 120, size: 3, adv: 0 },
        { id: 2, rate: 150, size: 7, adv: 0 },
        { id: 3, rate: 180, size: 5, adv: 0 }
      ]
    };
  }
  onChange(e, i) {
    const data = [...this.state.data];
    data[i].rate = e.target.value;
    data.splice(i, 1, data[i]);
    this.setState({ data });
  }

  onChangeAdv(e, i) {
    const data = [...this.state.data];
    data[i].adv = e.target.value;
    data.splice(i, 1, data[i]);
    this.setState({ data });
  }

  calculateBalance(i) {
    let { data } = this.state;
    let bal = 0;
    bal = (data[i].rate * data[i].size) - data[i].adv;
    return bal;
  }

  render() {
    let { data, adv } = this.state;
    return (
      <div>
        {data.map((item, i) => {
          return (
            <div key={i}>
              <input
                type="text"
                value={item.rate}
                onChange={e => this.onChange(e, i)}
              />
              // Rate
              <input type="text" value={item.rate * item.size} /> // Total Cost
              <input type="text" value={item.adv} onChange={e => this.onChangeAdv(e, i)} /> // Advance
              <input type="text" value={this.calculateBalance(i)} /> // Balance
              <br />
              <br />
            </div>
          );
        })}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>