javascript - 我如何设置引用并为ReactJS中的循环元素分配值

我在将值设置为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>
})

我该如何实现？

我试过使用裁判，但无法正常工作。

谢谢！

最佳答案

我有一个不使用refs的解决方案，它使用其索引更新inputs的值。

更新

预付款和余额的计算分别添加到功能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>

关于javascript - 我如何设置引用并为ReactJS中的循环元素分配值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51093708/