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

Question

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

我在将两个输入作为“用户名和密码”并创建智能状态方面存在问题。我想像关联数组一样在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> 
    ) 
    } 
} 

我最终的应用程序的输出应该像用户输入两个细节，一个用户名和一个密码。然后我将显示他们下面的文本框中为这样的用户名和密码的列表..

No username password 

0 john  123 
1 sam   abc 
2 rob   xyz 

Answer 1

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

Answer 2

我假设你正在试图使这两者你已经包含在你的国家的用户名和密码目的。

下面是我已经包含在jsbin中的一个例子。

https://jsbin.com/gokamus/1/edit?html,js,output

作为概述，我下面复制我的变化。

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> 

我看到一个提交形式动态填充的userName和密码。根据我的理解，我没有实现它，这个问题的范围是正确地提供用户名和密码。