0
146
ViewsCómo activar el evento onChange para un elemento específico en reaccionar
Hola chicos, soy nuevo en reaccionar y después de leer el documento. salto directamente al desarrollo con reaccionar, tengo un conjunto de elementos con el mismo evento onChange ahora el problema que tengo es que todos los elementos son de control en lugar del objetivo
function handleOnChange(e){ let value = e.target.value if(isNaN(value)){ value = 0 } else if(value === "" || value <= 0){ value = 0 } setInfo(preInfo => { return{ ...preInfo, quantity:value, } }) } <div className="input-group buynum_select"> <span className="input-group-btn"> <button className="btn minus" onClick={e => handlerUpdateQuantity(-1)}>-</button> </span> <input maxLength="7" className="form-control" value={info.quantity} onChange={e => handleOnChangeQuantity(e)} onKeyUp={e => handleKeyUpQuantity(e)} type="text" /> <span className="input-group-btn"> <button className="btn plus" onClick={e => handlerUpdateQuantity(1)}>+</button> </span> </div> <div className="input-group buynum_select"> <span className="input-group-btn"> <button className="btn minus" onClick={e => handlerUpdateQuantity(-1)}>-</button> </span> <input maxLength="7" className="form-control" value={info.quantity} onChange={e => handleOnChangeQuantity(e)} onKeyUp={e => handleKeyUpQuantity(e)} type="text" /> <span className="input-group-btn"> <button className="btn plus" onClick={e => handlerUpdateQuantity(1)}>+</button> </span> </div> Tengo varias instancias del campo de entrada, pero cuando trato de cambiar el valor del campo de entrada, también se actualizan otras entradas. ¿Cómo puedo orientar una entrada específica entre otras? 
aunque solo controlo la entrada 1 pero la entrada 2 también tiene valor
2 answers
Answer question0
Sus dos campos de entrada tienen el mismo valor con {info.quantity}. Debe cambiar el valor y el nombre para identificar el control de entrada.
por ejemplo;
<input maxLength="7" className="form-control" name="quantity1" value={info.quantity1} onChange={e => handleOnChangeQuantity(e)} /> <input maxLength="7" className="form-control" name="quantity2" value={info.quantity2} onChange={e => handleOnChangeQuantity(e)} /> function handleOnChange(e){ var name = e.target.name; var value = e.target.value; ... setInfo(preInfo => { return{ ...preInfo, [name]:value, } }) }0
La forma más fácil de resolver esto es crear un componente de counter separado que mantenga su estado localmente:
const Counter = props => { const [count, setCount] = useState(0) return ( <div className="counter"> <button onClick={e => setCount(count - 1)}> - </button> <input value={count} onChange={e => setCount(parseInt(e.target.value))} /> <button onClick={e => setCount(count + 1)}> + </button> </div> ) }De esta manera, cada componente lleva una cuenta diferente.
No conozco exactamente su caso de uso, pero podría tener más sentido utilizar el mismo estado que un objeto y mantener cada valor bajo un nombre de propiedad específico del objeto o mantener una matriz como estado y el N-ésimo elemento en la matriz corresponde a el conteo N - [3, 5, 1, 2, 0, 5] significa que el primer contador tiene el valor 3, el segundo contador tiene el valor 5, el tercero tiene el valor 1 y así sucesivamente... Todo depende del uso caso. Si estuviera representando dinámicamente cada contador, elegiría una matriz de valores, ya que es más eficiente en términos de memoria y rendimiento y una solución limpia. Si tengo un número fijo de elementos, probablemente iría con una combinación de estado de objeto y componente de conteo separado con setState transmitido.