如何輸入名稱價格1，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

你可以嘗試這樣做。

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