0
84
ViewsHow do I get value of an element after clicking another?
In React, how can I get the value of another element by clicking/changing a different one?
<div>
<input {get this value}/>
<button onClick={()=> console.log(get value of above input field)}/>
</div>
·
Juan Pablo Isaza
2 answers
Answer question0
You can use document.getElementById().value
export default function App() {
function getText() {
var myInputText = document.getElementById('myInput').value;
console.log('Input text:', myInputText);
}
return (
<div>
<input id="myInput" />
<button onClick={() => getText()}>Get Text</button>
</div>
);
}
Or You can use Forms and useState Hook
export default function App() {
const [name, setText] = useState('');
const handleSubmit = (evt) => {
evt.preventDefault();
console.log(`Input text: ${name}`);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={name}
onChange={(e) => setText(e.target.value)}
/>
<input type="submit" value="Submit" />
</form>
);
}
·
Juan Pablo Isaza
Report
0
1) Controlled input using useState hook
const [inputValue, setInputValue] = useState("");
function onInputChange(e) {
setInputValue(e.target.value);
}
const getValue = () => console.log(inputValue);
return (
<div>
<input value={inputValue} onChange={onInputChange} />
<button onClick={getValue}>get value</button>
</div>
);
2) Uncontrollect input using useRef hook
const inputRef = useRef("");
const getValue = () => console.log(inputRef.current.value);
return (
<div>
<input ref={inputRef} />
<button onClick={getValue}>get value</button>
</div>
);
·
Juan Pablo Isaza
Report
Answer question