useRef 후크를 사용하여 대량 데이터 삽입을 위해 React에서 여러 개의 동일한 입력 상자를 처리하는 방법은 무엇입니까?

useRef Hook 사용으로 React에서 사용자 정의 속성 값을 얻는 방법은 무엇입니까?
useRef() 후크를 사용하여 React Js에서 입력 상자 defaultValue를 변경하는 방법은 무엇입니까?

이번 포스트에서는 useRef() React Hook을 사용하여 여러 입력 Box defaultValue를 처리하는 방법에 대해 알아봅니다.

1)onInputChange() 함수

const onInputChange = (e) => {

        ref.current[parseInt(e.currentTarget.attributes['refindex'].value)].value =e.target.value;


    }

모든 입력 상자 값을 얻고 배열에 저장하는 방법은 무엇입니까?

1)ShowValue() 함수

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);
    }

모든 입력 상자 값을 지우는 방법은 무엇입니까?

1)ClearValue() 함수

const ClearValue = () => {

        for (let i = 0; i < ref.current.length; i++) {

            ref.current[i].value = 0;
        }

    }

마침내 우리는 요구 사항을 완료했습니다

1)앱.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;

잘했어요! 마지막으로 모든 InputBox 값을 배열에 저장합니다!

좋아요나 댓글로 사랑을 전해주세요♥

참조 w3schools

Download Source Code from GitHub Repository