Se encontró un problema en reaccionar. Hay dos Textfield de texto de entrada en la misma fila con etiquetas (A, B) que tienen un valor null inicial. Entonces, ¿cómo podemos lograr esto?
Puede lograr esto usando onChange event onChange y useState hook. en el siguiente ejemplo, definí un onChange event donde configuré A y B con lo que escribiste y cero respectivamente.
import { useEffect, useState } from "react"; export default function App() { const [a, setA] = useState(); const [b, setB] = useState(); function AKeyPress(e) { e.preventDefault(); setB("0"); setA(e.target.value); } function BKeyPress(e) { e.preventDefault(); setA("0"); setB(e.target.value); } return ( <div className="App"> <header className="App-header"></header> <h1>Hello</h1> A <input type="text" onChange={AKeyPress} value={a} /> B <input type="text" onChange={BKeyPress} value={b} /> </div> ); }Puede almacenar los valores en el estado y, si alguno de estos cambios, establece el actual en el valor actualizado y elimina el otro. Puede usar el evento onChange para realizar un seguimiento de los cambios y event.target para obtener el valor del campo.
Mira el ejemplo a continuación:
function App() { const [field1, setField1] = React.useState(''); const [field2, setField2] = React.useState(''); function handleChange(event) { if (event.target.name === 'field1') { setField2(''); setField1(event.target.value); } if (event.target.name === 'field2') { setField1(''); setField2(event.target.value); } } return ( <form> <label> Field 1 <input type="text" name="field1" onChange={handleChange} value={field1} /> </label> <label> Field 2 <input type="text" name="field2" onChange={handleChange} value={field2} /> </label> </form> ); } ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); <div id="root"></div> <script src="https://unpkg.com/react/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>También podría usar una matriz como el estado:
function App() { const [inputs, setInputs] = React.useState([{ id: 'input1', value: '', }, { id: 'input2', value: '', }]); function handleChange(event) { let updatedInputs = inputs.map((input) => input.id === event.target.name ? { ...input, value: event.target.value } : { ...input, value: '' } ); setInputs(updatedInputs); } return ( <form> {inputs.map((input) => ( <label key={input.id}> {input.id} <input type="text" name={input.id} onChange={handleChange} value={input.value} /> </label> ))} </form> ); } ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); <div id="root"></div> <script src="https://unpkg.com/react/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>