如何输入名称 price1, price2, price3.... 反应

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

我会将您的输入添加到您的 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)});
}

Answer 2

你可以试试这个。

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

如何输入名称 price1, price2, price3.... 反应

How input name price1, price2, price3.... in react

reactjs

react-redux