javascript - 如何添加动态添加字段的值

Question

我尝试在此处添加新字段，每次单击“+”按钮时都会添加字段输入。它工作正常，但我遇到的问题是我想添加这些输入字段的值。由于我是新手，所以我没有找到实现它的方法。是否有可能实现这一目标。

class InputFields extends React.Component{
    render(){
    return (
        <div>
          <input name={`value[${this.props.index + 1}]`} onChange={this.onChangeValue} />
        </div>

        );
    }
}

class Main extends React.Component{
  constructor(props){
      super(props);

      this.values = props.value;

      this.state={
         inputs:[],
         values:[]
      };
      this.addInputs      = this.addInputs.bind(this);
  }

  addInputs() {
     const inputs = this.state.inputs.concat(InputFields);
     this.setState({ inputs });
  }

  onChangeValue(e){
   var value = e.target.value;
   this.value =value;
   this.addValues();
  }

  addValues(){
     ...
  }

  render () {
     const inputs = this.state.inputs.map((Element, index) => {
         return <Element key={ index } index={ index } />
     });

     return <div>
             <div>
              <input name={`value[${this.props.index}]`} onChange={this.onChangeValue} />
             </div>
             <div>
              <button className="btn btn-sm btn-primary" onClick={this.addInputs}>+</button>
             </div>
            </div>
  }
}

ReactDOM.render(
 <Main />,
 document.getElementById('calculator')
 );

Answer 1

不需要管理两个不同的变量来管理它，您可以通过数组循环它并可以更改 onChange 事件上的值

import React from "react";

export default class Example extends React.Component {
  state = {
    values: [null]
  };

  add() {
    this.setState(prevState => prevState.values.push(null));
  }
  changeVal(val, index) {
    this.setState(prevState => (prevState.values[index] = parseFloat(val)));
  }
  getSum() {
    let sum = 0;
    for (let i = 0; i < this.state.values.length; i++) {
      if (this.state.values[i] !== null) {
        sum += this.state.values[i];
      }
    }
    return sum;
  }

  render() {
    return (
      <div>
        {this.state.values.map((val, index) => (
          <div key={index}>
            <input
              onChange={e => this.changeVal(e.target.value, index)}
              type="number"
              value={val}
              placeholder="Enter a value"
            />
          </div>
        ))}
        <hr />
        Sum is {this.getSum()}
        <hr />
        <button onClick={this.add.bind(this)}> +Add</button>
      </div>
    );
  }
}

编辑

添加了方法getSum()，并在changeVal()方法中将数字转换为 float

Codesandbox 链接 - https://codesandbox.io/s/235o6xoxyr