Question

我是Reactjs的新手。我要做的只是如下：

我有三个字段：ENTRY，EXIT，TOTAL

总计=退出-进入

示例：

ENTRY |退出总计

1 | 2 | 1

2 | 4 | 2

3 | 6 | 3

5 | 10 | 5

当单击+ Add按钮时，ENTRY和EXIT是动态添加的字段。我已经能够动态添加字段，但是没有得到 TOTAL 值。

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>
    );
  }
}

这是现场demo

希望它会有所帮助：）

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)}
        />

这里是直播demo。

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

2 个答案: