重复组件 onclick React

Question

我是 React 的新手，我正在创建一个注册。我希望用户能够单击一个按钮以将其他人添加到注册中。我有一个“人”组件，它包含表单字段，onclick 我想复制那个组件。

import React, { useRef } from 'react'
import Person from './Person'

function BookingForm() {
    const registrationForm = useRef()
    console.log(registrationForm.current)
    let handleAddPerson = (e) => {
        e.preventDefault()
        registrationForm.appendChild(<Person/>)
    }
    
    return (
        <>
        <form ref={registrationForm} id='registrationForm'>
            <Person/>
            <button onClick={handleAddPerson}  className="btn btn-main mt-2"><i className="fas fa-plus"></i> ADD PERSON</button>
        </form>
        </>
    )
}

export default BookingForm

Answer 1

我建议您使用 state 而不是 ref 来实现它。如下图：

import React, { useState } from 'react'
import Person from './Person'

function BookingForm() {
    const [persons,setPerson] = useState([<Person key={0} />]);

    let handleAddPerson = (e) => {
        e.preventDefault()
        setPerson([...persons,<Person key={persons.length} />]);
    }
    
    return (
        <>
        <form id='registrationForm'>
            {persons}
            <button onClick={handleAddPerson}  className="btn btn-main mt-2"><i className="fas fa-plus"></i> ADD PERSON</button>
        </form>
        </>
    )
}

export default BookingForm;

希望对您有所帮助。在这种情况下使用状态更好。

重复组件 onclick React

duplicate component onclick React

javascript

jsx

reactjs

redux-toolkit