How to get Custom attributes value in React With Use of useRef Hook ?
How to Change Input Box defaultValue In React Js using useRef() Hook ?
In this Post, we will learn about how to handle multiple input Box defaultValue using useRef() React Hook.
1)onInputChange() Function
const onInputChange = (e) => { ref.current[parseInt(e.currentTarget.attributes['refindex'].value)].value =e.target.value; } How to get All Input Box Value and Store in Array ?
1)ShowValue() Function
const ShowValue = () => { const myInputValue = []; for (let i = 0; i < ref.current.length; i++) { myInputValue.push({ [ref.current[i].name]: ref.current[i].value }) } console.log(myInputValue); } How to Clear All Input Box Value ?
1)ClearValue() Function
const ClearValue = () => { for (let i = 0; i < ref.current.length; i++) { ref.current[i].value = 0; } } Finally We Completed our Requirement
1)App.js
import './App.css'; import React, { useRef } from 'react'; function App() { const ref = useRef([]); const onInputChange = (e) => { ref.current[parseInt(e.currentTarget.attributes['refindex'].value)].value =e.target.value; } const ShowValue = () => { const myInputValue = []; for (let i = 0; i < ref.current.length; i++) { myInputValue.push({ [ref.current[i].name]: ref.current[i].value }) } console.log(myInputValue); } const ClearValue = () => { for (let i = 0; i < ref.current.length; i++) { ref.current[i].value = 0; } } return ( <> <div style={{ width: '50%', backgroundColor: '#f7f4f3', marginLeft: '150px', marginTop: '100px', padding: '50px 0px 100px 50px' }}> <label><b>Money</b></label> <input ref={(element) => { ref.current[0] = element }} refindex={0} name='ModeyValue' defaultValue='123464' type='text' onChange={onInputChange} /> <br /> <label><b>Money</b></label> <input ref={(element) => { ref.current[1] = element }} refindex={1} name='ModeyValue' defaultValue='123' type='text' onChange={onInputChange} /> <br /> <label><b>Money</b></label> <input ref={(element) => { ref.current[2] = element }} refindex={2} name='ModeyValue' defaultValue='1' type='text' onChange={onInputChange} /> <br /> <label><b>Money</b></label> <input ref={(element) => { ref.current[3] = element }} refindex={3} name='ModeyValue' defaultValue='1234' type='text' onChange={onInputChange} /> <br /> <button style={{ padding: '5px', backgroundColor: 'green', border: 'none', margin: '5px 5px 5px 5px' }} onClick={ShowValue}>Check All Input Value in Form of Array</button> <button style={{ padding: '5px', backgroundColor: 'red', border: 'none', margin: '5px 5px 5px 5px' }} onClick={ClearValue}>Clear all Input Value</button> </div> </> ); } export default App; Well done! Finally We Store All InputBox Value in Array!
Drop some love by liking or commenting ♥
Reference w3schools
Top comments (0)