0
304
Views¿Cómo vaciar un cuadro de texto usando un botón en reaccionar?
Tengo un cuadro de texto para ingresar números y, después de presionar el botón, quiero borrar el valor del cuadro de texto. No tengo idea de cómo hacerlo, y alguien puede ayudarme?
Ejemplo: cuando presiono el botón Agregar en la fila Sillas, se deben borrar 10.
<CRow> <CCol className="col-sm-6"> <CFormInput id="quantity" type="number" name="quantity" max={item.available} min={1} onChange={(e) => { resetErrors() quantity[index] = e.target.value }} /> </CCol> <CCol> <CButton color="success" size="sm" onClick={() => { resetErrors() handleSave(item._id, index) }} > <CIcon icon={cilPlus} className="me-2" /> Add </CButton> </CCol> </CRow>1 answers
Answer question0
Debe definir un estado para la quantity y luego actualizar ese estado cada vez que el usuario ingrese un nuevo valor para ese nuevo valor. O cuando se presiona el botón Clear , actualícelo a 0 .
Por supuesto, también puede actualizar a una cadena vacía si lo desea. Entonces, solo debe tener cuidado con los tipos, ya que
+significa concatenación de cadenas si se trata de una cadena, no de una suma. Así que asegúrese de que su programa lo maneje correctamente.
function App() { const [quantity, setQuantity] = React.useState(0); return ( <React.Fragment> <input value={quantity} type="number" onChange={e => setQuantity(e.target.valueAsNumber)} /> <button onClick={() => setQuantity(0)}>Clear</button> </React.Fragment> ); } ReactDOM.render(<App/>, document.getElementById('root')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="root"></div>También parece que está utilizando una matriz para todas las cantidades, lo cual está perfectamente bien, solo asegúrese de crear una nueva matriz cuando actualice una cantidad, ya que el estado debe tratarse como inmutable. Además, en React y volver a renderizar solo se activa cuando la referencia de la matriz cambia, ya que solo se realiza una comparación superficial (NO una comparación profunda) de las matrices. Podrías hacer eso, por ejemplo, así:
Este hilo también podría ser útil en ese sentido.
// original const quantities = [3, 12, 24]; // index to update the array on const index = 1; // create a new array with the quantity at index increased by 1 const newQuantities = [...quantities.slice(0, index), quantities[index] + 1, ...quantities.slice(index + 1)]; // arrays are actually two different arrays console.log(quantities); console.log(newQuantities); // references are not the same console.log(quantities === newQuantities);