Reactjs 从多个文本框中获取输入并更新状态以显示所有用户名和密码？

我想创建一个小应用程序，在这里我可以从用户那里收集用户名和密码，并在更新状态下显示它

我在将两个输入作为“用户名和密码”并创建类似wise的状态时遇到问题。我想在

this.state

中创建一个像关联数组一样的对象。我该怎么做

我这样写我的程序，现在只需要用户名。如何将密码也与之关联

import React from 'react';

export class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            userName : ['john','sam','rob']
            password : ['123','abc','xyz']
        }
    }
    render(){
        const {userName} = this.state;
        return (
        <div>
        <h1>Happy Registering Here ...</h1>
        <div>
        <form>
            <input type="text" placeholder="username"/>
            <input type="text" placeholder="password"/>
            <input type="submit" value="submit"/>
        </form>

        <table>
        <thead>
            <tr>                
            <th>#</th>
            <th>userName</th>
            <th>password</th>
            </tr>
        </thead>
        <tbody>
            {
                userName.map((item, index) =>{
                    return (<tr key={item}>
                            <td>{index}</td>
                            <td>username</td>
                            <td>password</td>
                        </tr>)
                })

            }
        </tbody>
        </table>
        </div>


     </div>
    )
    } 
}

userName.map（（项目，索引）=>{
返回(
{index}
{item}
{this.state.password[index]}
)
}，本页）

我假设您正在尝试呈现包含在状态对象中的用户名和密码

下面是我在jsbin中包含的一个示例

作为概述，我在下面复制了我的更改

    const {userName} = this.state;
    const {password} = this.state;  
    ......

    <tbody>
        {
            userName.map((item, index) =>{
                return (<tr key={item}>
                        <td>{index}</td>
                        <td>{userName[index]}</td>
                        <td>{password[index]}</td>
                    </tr>)
            })

        }
    </tbody>

const{userName}=this.state；
const{password}=this.state；
......
{
userName.map（（项目，索引）=>{
返回(
{index}
{用户名[索引]}
{密码[索引]}
)
})
}

---

我确实看到了一个提交表单，它动态地填充用户名和密码。据我所知，我还没有实现它，这个问题的范围是正确地呈现用户名和密码

我不完全确定你在问什么。

userName.map((item, index) =>{
                    return (<tr key={item}>
                            <td>{index}</td>
                            <td>{item}</td>
                            <td>{this.state.password[index]}</td>
                        </tr>)
                }, this)

    const {userName} = this.state;
    const {password} = this.state;  
    ......

    <tbody>
        {
            userName.map((item, index) =>{
                return (<tr key={item}>
                        <td>{index}</td>
                        <td>{userName[index]}</td>
                        <td>{password[index]}</td>
                    </tr>)
            })

        }
    </tbody>