Lo que trato de hacer es generar una input dinámica y recopilar todos los valores en un object con nombre dinámico, por lo que definí un object vacío en el estado:

 constructor() { super(); this.state = { setting_value: {}, // our object setting_append: 0, // define how input will be append }; }

Luego agrego la primera input como entrada predeterminada:

 componentDidMount() { this.handleAppend(); // run this on load }

En esta función, agrego una input , luego creo un item y lo agrego al objeto actual:

 handleAppend = () => { this.setState({ setting_append: this.state.setting_append + 1 }); let name = ''; let obj = this.state.setting_value; // current object for(let i = 0; i < this.state.setting_append; i++){ name = 'input_' + i; obj[name] = null; } this.setState({ setting_value: obj }) }

Y renderizar así:

 render() { const InputList = []; for (let i = 0; i < this.state.setting_append; i++) { InputList.push(i); } ... return ( {InputList && InputList.map(function (El, Index) { return ( <Col key={Index} md="6"> <Label>input {Index}</Label> <Input onChange={(e) => {this.handleValues(e, Index)}}/> </Col> ) })} ) <Button onClick={this.handleAppend}>+</Button> // append more input

Y esta es nuestra función de cambio:

 handleValues = (e, row) => { let value = e.target.value; let input_name = 'input_' + row; if(value){ const new_obj = {...this.state.setting_value, ...{ [input_name]: value}} this.setState({ setting_value: new_obj }); console.log(new_obj); } }

¡Problema!

Bien, después de cargar la página, obtuve una entrada, luego escribo un texto y la salida es (registro) :

 {input_0: 'xxxx'}

Luego hago clic en el botón para agregar otra entrada, luego escribo algo de texto:

 {input_0: null, input_1: '12'}

hace que la entrada anterior sea null pero necesito esta salida:

 {input_0: 'xxxx', input_1: '12'}

Luego, si escribo algún valor nuevo en la primera entrada, la salida es:

 {input_0: 'sdf'}

Pero debería ser:

 {input_0: 'sdf', input_1: '12'}

¿Alguna idea de lo que he hecho mal?