如何输入名称price1、price2、price3....在react中

Question

​

let arrNum = 0;

function addInput() {
  // click add input btn
  arrNum += 1;
}

<input type="text" name={ "price" + arrNum } />
<button ... onClick= { this.addInput }></button>

​

每次用户按下一个按钮，添加输入和arrNum += 1。

当我点击3次点击时我想要什么

<input type="text" name="price1" />
<input type="text" name="price2" />
<input type="text" name="price3" />

但我点击

<input type="text" name="price3" />
<input type="text" name="price3" />
<input type="text" name="price3" />

对不起，我的英语不好

Answer 1

您可以尝试这样做。

const addComponents = (num) => {
    let i;
    for(i = 0; i < num; i++) {
        const priceName = 'price'+i;
        arr.push(<AddForm priceName= {priceName}/>); //price name will change for each loop price0, price1, price2 ...
    }

    return arr;
  }

在addForm中

 this.state = {
    price: this.props.priceName,
    largeValue: '',
    middleValue: '',
    smallValue: '',
    seValue: '',
    seseValue: '',

    largecat: la1
  };

Answer 2

我会将您的输入添加到state中的一个数组中。

constructor(props, context) {
  super(props, context);
  this.state = {
    inputs: ["price1"],
  };
}

然后，您可以执行以下操作：

render() {
  return (
    {this.state.inputs.map(
      (inputName, i) => <input type="text" name={inputName} key={i} />
    )}
    <button ... onClick= { this.addInput }></button>
  );
}

function addInput() {
  let temp = this.state.inputs.slice();
  let size = this.state.inputs.length+1;
  this.setState({inputs: temp.push("price"+length)});
}