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

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

Answer 2

在反应中，视图是数据的函数：UI = fn（data）

这意味着您将编写一个可以将数据转换为视图的组件树。 并且仅操作数据，这与您可能在jQuery中所熟悉的不同。

实际上，这意味着：

让组件Input处理一个输入的呈现：

const Input = ({value, onChange}) =>
  <input value={value} onChange={event => event.target.value} />

在您的状态下，仅将输入值列表另存为字符串。 React将在稍后将每个值转换为Input组件

this.state = {inputs: []}

编写一个负责向状态而不是视图添加新输入的函数

addInput = () => {
  this.setState({
    inputs: this.state.inputs.concat('')
  })
}

创建一个方法来更改列表中一个输入的值

changeValue = (i, newValue) => {
  this.setState({
    inputs: [
      ...this.state.inputs.slice(0, i),
      newValue,
      ...this.state.inputs.slice(i+1)]
  })
}

在Main的render方法中，遍历输入列表并转换为Input组件列表

this.state.inputs.map(
  (input, i) =>
    <Input
      key={i}
      value={input}
      onChange={newValue => this.changeValue(i, newValue)}
    />
)