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 和密码的提交表单。我没有按照我的理解实现它，这个问题的范围是正确地呈现用户名和密码。

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

2 个答案: