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

我有一个不使用from selenium import webdriver from getpass import getpass from selenium.webdriver.support.ui import WebDriverWait ` usr = input('enter your user name : ') psd = input('enter the password : ') url = "https://www.coursera.org/courses?authMode=login&languages=en&query=big+data&userQuery=big+data" # create a new Chrome session driver = webdriver.Chrome() driver.get(url) username_box = driver.find_element_by_id('emailInput-input') username_box.send_keys(usr) pass_box = driver.find_element_by_id('passwordInput-input') #FHSU pass_box.send_keys(psd) login_btn = driver.find_element_by_xpath('//*[@id="authentication-box-content"]/div/div[2]/div/div[1]/form/div[1]/button/span') login_btn.submit() driver.find_element_by_xpath('//*[@id="ratings"]/div[2]/button').click()的解决方案，它使用其索引更新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'));

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

1 个答案: