如何通过单击按钮 reactjs 创建一个新的输入字段行答案

【问题标题】：How create a new input field row by clicking a button reactjs如何通过单击按钮 reactjs 创建一个新的输入字段行
【发布时间】：2021-10-01 19:36:24
【问题描述】：

我正在构建一个电子商务应用，我想收集用户不同的电话号码和地址。

我想创建一个新字段，用户可以在其中输入新的电话号码和地址

我尝试使用状态来完成任务，但出现错误

TypeError：contactInfo.phoneInputs 未定义

const RegisterModal = ({openRegisterModal, setOpenRegisterModal}) => {
    const [contactInfo, setContactInfo] = useState({
        phoneInputValue : {},
        phoneInputs: [],
        addressInputValue : {},
        addressInputs: [],
    })
    console.log(contactInfo)
    const addContact = (e) => {
        e.preventDefault()
        const contactsphoneInfo = "phoneNumber";
        const contactsAddressInfo = "address";
        let phoneInputBox = 
        <Input name={contactsphoneInfo} star="false" label="PhoneNumber" type="text" className="col-md-6" />

        let addressInputBox = 
        <Input name={contactsAddressInfo} star="false" label="address" type="text" className="col-md-6" />
        setContactInfo(contactInfo.phoneInputs.push({phoneInputBox}))
        console.log(contactInfo)
    }

return (
        <div>
          {
             contactInfo.phoneInputs.map(input => input)
           }
           button onClick={addContact}>Add</button>
</div>

) }

导出默认注册模式

我该如何解决这个错误

链接到代码框

https://codesandbox.io/s/distracted-morse-s6zn0

【问题讨论】：

标签： html css reactjs button

【解决方案1】：

我相信你的 setstate 有点可疑

setContactInfo({...contactInfo, phoneInputs: [...contactInfo.phoneInputs,phoneInputBox ]});

这应该可以。但我建议你尝试更干净的代码。和 console.log(contactInfo) 在渲染之前如果你检查它会是未定义的，如果你想检查初始值仍然使用 useEffect 然后记录它。

【讨论】：