Estoy creando una aplicación en la que quiero que el usuario especifique una cantidad de campos de texto y luego represente esta cantidad de campos dinámicamente. Tengo problemas para configurar el estado para que sea único para cada campo. Aquí está el segmento de código:
var fieldsArray = []; for(var i = 0; i <= this.props.numToShow; i ++){ fieldsArray.push( <div> <label> <div className="label">{i}</div> <input type='text' value={this.state.value} name={this.state.value} onChange={this.handleChange} /> </label> </div> ); } return ( <div className = 'inputs'> {fieldsArray} </div> );Actualmente, cuando cambio uno de los campos, todos los demás campos se actualizan con ese estado de campos único. Aquí está la función handleChange que establece el estado:
handleChange: function(e){ this.setState({ value: e.target.value, }); }¿Es posible inicializar el estado como una matriz y realizar un seguimiento de las entradas de esa manera? ¿O hay una mejor manera de hacer esto?
Mantener una matriz de valores en el estado funcionaría bien. Solo tendrá que asegurarse de pasar el índice de la entrada para saber qué actualizar. bind ayuda con esto:
class YourComponent extends React.Component { constructor(props) { super(props); this.state = { values: [] }; } handleChange(i, e) { this.setState({ values: { ...this.state.values, [i]: e.target.value } }); } render() { var fieldsArray = []; for (var i = 0; i <= this.props.numToShow; i++) { fieldsArray.push( <div> <label> <div className="label">{i}</div> <input type='text' value={this.state.values[i]} name={this.state.values[i]} onChange={this.handleChange.bind(this, i)} /> </label> </div> ); } return ( <div className = 'inputs'> {fieldsArray} </div> ); } }onChange={(e) => { var newPresetList = [...presetList] newPresetList.map((_item) => { if (_item.id === item.id) { _item.preset_name = e.target.value return } }) setPresetList(newPresetList) }}