Pasting into multiple input fields in React JS

Question

I am having an issue trying to figure out how to paste a value into multiple input fields. I am basically building a verify screen with 6 separate inputs that have a maxLength of 1, and want to be able to paste the entire 6 digit code so that is populates all 6 inputs. I have found several solutions in Jquery but not quite sure how to pull it off in react. Here is my code.

const Verify = ({ handleSubmit, method, rec, changeInput }) => {
    const navigate = useNavigate();
    const { email, phone } = rec
    const send = method === 'email' ? { email: email } : { phone: phone }

    const renderContent = () => {
        const methodLabel = method === 'email' ? 'email address' : 'phone number'

        return (
            <>
            
            
                
                
                Enter the PIN number we just sent to your {methodLabel}.
                
                
                
                    
                    
                    
                    
                    
                    
                
                Resend Code
                
                    
                
            
            
        )
    }

    return (
        <>
            {rec.email.length < 1 && rec.phone.length < 1 ? 
                :
                
                     onFormSubmit(e, handleSubmit)}>
                        
                            {renderContent()}
                        
                    
                
            }
        
    )
}

and here is the changeInput function and handleChange function, as well as what rec looks like being passed to the component.

const [rec, setRec] = useState({
        accept: false,
        email: '',
        phone: '',
        pin: [],
    })

    const changeInput = (e) => {
        const { maxLength, name, value } = e.target;
        const [fieldName, fieldIndex] = name.split('-')

        if(value.length >= maxLength) {
            if(parseInt(fieldIndex, 10) < numOfFields) {
                const nextSibling = document.querySelector(`input[name=${fieldName}-${parseInt(fieldIndex, 10) + 1}]`)
                if(nextSibling !== null) {
                    nextSibling.focus()
                }
            }
            setRec({
                ...rec,
                pin:[...rec.pin, value]
            })
        }
    }

    const handleChange = (name, value) => {
        if (name === 'mobile') name = 'phone'
        const recState = {
            ...rec,
            [name]: value,
        }
        setRec(recState)
    }

any help would be appreciated.

user_18200347 · Answer

Don't use document.querySelector or document.querySelectorAll inside of your React component. Instead add those elements directly to your component.

Here's a minimal verifiable example using the paste event. Run the example below and paste the 4-digit number into any input.

function App() {
  const [segments, setSegments] = React.useState(["","","",""])
  function onPaste(event) {
    const pasted = event.clipboardData.getData("text/plain")
    setSegments(pasted.split("").slice(0, segments.length))
  }
  function randomPin() {
    return Math.floor(Math.random() * 9000) + 1000
  }
  return 
    Copy {randomPin()} and paste into any input
    {segments.map((s, key) =>
      
    )}
    {JSON.stringify(segments)}
  
}

ReactDOM.render(, document.querySelector("#app"))

input { width: 2rem; }
pre { padding: 0.5rem; background-color: #ffc; }

In the program above, there is no way to type the PIN in manually. By adding a onChange event, manual entry can be supported. Don't forget to use event.preventDefault in the onPaste handler otherwise all values will be pasted into a single segment.

function randomPin() {
  return Math.floor(Math.random() * 9000) + 1000
}

function App({ pin }) {
  const [segments, setSegments] = React.useState(["","","",""])
  function onPaste(event) {
    event.preventDefault()  // ✅
    const pasted = event.clipboardData.getData("text/plain")
    setSegments(pasted.split("").slice(0, segments.length))
  }
  function update(index) { return event => 
    setSegments([
      ...segments.slice(0, index),
      event.target.value,
      ...segments.slice(index + 1)
    ])
  }
  return 
    Enter {pin} manually or copy/paste into any input
    {segments.map((s, key) =>
      
    )}
    {segments.join("") == pin ? "✅" : "❌"}
    {JSON.stringify(segments)}
  
}

ReactDOM.render(, document.querySelector("#app"))

input { width: 2rem; }
pre { padding: 0.5rem; background-color: #ffc; }

Pasting into multiple input fields in React JS

1 Answers