如何从动态添加的字段中求出差异--反应

Question

我刚接触过Reactjs。我想做的就是：

我有三个字段:进入，出口，总计

总计=出入境

示例：

入口/出口--总

1\x{e76f}2

2\x{e 010}4

3-6-3

5/10/5

在这里，当单击+Add按钮时，输入和退出是动态添加字段。我能够动态地添加字段，但是我没有得到总值。

var entry;
var exit;
class Calculator extends React.Component {
      state = {
      values: [{id:0,exit:0,entry:0}],
      total:[]
 };

  add() {
    this.setState(prevState => prevState.values.push(null));
  }
  changeVal(val, index, key) {
    if(key == 'exit'){
      exit = val;
    }else{
      entry =val;
    }
     this.setState(prevState => (prevState.values[index] = {id:index, exit:val, entry: val}));
   }
  getTotal() {
    let total = 0;
    for (let i = 0; i < this.state.values.length; i++) {
      if (this.state.values[i] !== null) {
        total = this.state.values[i].exit - this.state.values[i].entry;
      }
    }
    return total;
  }

  render() {
    return (
      <div>
        {this.state.values.map((val, index, key) => (
          <div key={index}>
            <input
              onChange={e => this.changeVal(e.target.value, index, 'exit')}
              name={ `exit[${index}]` }
              type="number"
              value={val}
              placeholder="Enter a value"
            />
            <input
              onChange={e => this.changeVal(e.target.value, index, 'entry')}
              name={ `entry[${index}]` }
              type="number"
              value={val}
              placeholder="Enter a value"
            />
            <input
              name={ `total[${index}]` }
              type="number"
              value={this.state.total}
            />
         </div>
        ))}
         <button onClick={this.add.bind(this)}> +Add</button>
      </div>
    );
  }
}
ReactDOM.render(<Calculator /> , document.getElementById('calculator'));

另外，请告诉我这是否是动态添加输入字段的最佳方法。谢谢

Answer 1

你可以这样做：

​

var entry;
var exit;
class Calculator extends React.Component {
  state = {
    values: [{ id: 0, exit: 0, entry: 0 }],
    total: []
  };

  add() {
    let { values } = this.state;
    values.push({ id: 0, exit: 0, entry: 0 });
    this.setState({ values });
  }

  changeVal(val, index, key) {
    let { values } = this.state;
    values[index][key] = val;
    this.setState({ values });
  }

  getTotal(data) {
    return Number(data.exit) - Number(data.entry);
  }

  render() {
    let { values, total } = this.state;
    return (
      <div>
        {values.map((val, index, key) => {
          return (
            <div key={index}>
              <input
                onChange={e => this.changeVal(e.target.value, index, "exit")}
                name={`exit[${index}]`}
                type="number"
                value={val.exit}
                placeholder="Enter a value"
              />
              <input
                onChange={e => this.changeVal(e.target.value, index, "entry")}
                name={`entry[${index}]`}
                type="number"
                value={val.entry}
                placeholder="Enter a value"
              />
              <input
                name={`total[${index}]`}
                type="number"
                value={this.getTotal(val)}
              />
            </div>
          );
        })}
        <button onClick={this.add.bind(this)}> +Add</button>
      </div>
    );
  }
}

​

这里是实时演示

希望它有帮助:)

Answer 2

您的代码行为不正常的地方很少。

<input
          onChange={e => this.changeVal(e.target.value, index, 'exit')}
          name={ `exit[${index}]` }
          type="number"
          value={val.exit}
          placeholder="Enter a value"
        />

您已经给出了整个对象的值，而不是应该赋予属性(val.exit)。

添加时，需要将对象推送到值数组。

add() {
this.setState(prevState => prevState.values.push({id:this.state.values.length,exit:0,entry:0}));}

在更改值时，需要更改特定属性的值。

changeVal(val, index, key) {
if(key == 'exit'){
  exit = val;
}else{
  entry =val;
}

var changeVal = this.state.values[index] || {id:index, exit:0, entry: 0};
changeVal[key] = val;
 this.setState(prevState => ( prevState.values[index] = changeVal));}

总之，您需要调用getTotal函数。

<input
          name={ `total[${index}]` }
          type="number"
          value={this.getTotal(index)}
        />

这里是一个实时的演示。