El código debe incrementar o disminuir su propia entrada, ya que el diámetro debe funcionar solo con el botón para el diámetro, etc. Pero cada clic incrementa todas las entradas
El problema es que cada clic incrementa todas las entradas que quiero cambiar
const [countDiameter,setCountDiameter] = useState(1); const [countFriction,setCountFriction] = useState(1); const [countRobotsQnt, setCountRobotsQnt] = useState(1); const [countSimulationTime, setCountSimulationTime] = useState(1); const incrementCount = () =>{ setCount(countDiameter + 1); }; const decrementCount = (i) =>{ if(countDiameter>0){setCount(countDiameter -1);} }; <div className='inputForm'> <input type="number" id='InputDiameter' pattern="^-?[0-9]\d*\.?\d*$" value = {count} onChange={(event) =>{ setCount(event.target.value) }}/> <label for="InputDiameter" className='static-value'>w</label> </div> <div className='ButtonCount' onClick={incrementCount}><button type='button'><span className="countText">+</span></button></div> <div className='ButtonCount' onClick={decrementCount}><button type='button'><span className="countText">-</span></button></div> </div> <div className='inputForm'> <input type="number" id='InputNumber' pattern="^-?[0-9]\d*\.?\d*$" value = {count} onChange={(event) =>{ setCount(event.target.value) }}/> <label for="inputNumber" className='static-value'>qnt</label> </div> <div className='ButtonCount' onClick={incrementCount}><button type='button'><span className="countText">+</span></button></div> <div className='ButtonCount' onClick={decrementCount}><button type='button'><span className="countText">-</span></button></div> </div>No estoy tan familiarizado con React, pero según los comentarios anteriores, habría intentado lo siguiente:
Primero, configure una función genérica de decremento e incremento que acepte un estado y una función de establecimiento.
const incrementState = (setter, state)=>{ setter(state + 1) } const decrementState = (setter, state)=>{ if (state > 0) { setter(state - 1); } } [diameter, setDiameter] = setState(1/*or your desired initial value*/)En su código HTML , puede llamar a su función de decremento/incremento pasando los parámetros anteriores a esta función:
<div className='inputForm'> <input type="number" id='InputDiameter' pattern="^-?[0-9]\d*\.?\d*$" value={diameter} onChange={(event)=>{ setDiameter(event.target.value) }}/> <label for="InputDiameter" className='static-value'>w</label> </div> <div className='ButtonCount' onClick={incrementState(setDiameter,diameter)}><button type='button'><span className="countText">+</span></button></div> <div className='ButtonCount' onClick={decrementState(setDiameter,diameter)}><button type='button'><span className="countText">-</span></button></div> </div>