1

我正在构建一个登录表单，我正在使用 reactjs 数组映射动态呈现输入字段。但是，我需要通过输入值获取每个用户输入。我使用状态来获取每个用户的值，但我不知道如何动态地做到这一点。

这是我的代码：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import $ from 'jquery';

const loginForm = [ 
   {
       name: 'email',
       placeholder: 'Email address',
       type: 'text'
   }, 
   {
       name: 'password',
       placeholder: 'Password',
       type: 'password'
   }
]

export class Login extends Component {

constructor(props) {
    super(props);

    this.state = {
        email: '',
        password: ''
    }

    this.getInput = this.getInput.bind(this);
}

getInput = (event) => {
    this.setState({
        [event.target.name] : [event.target.value]
    });
}

resetForm = (event) => {
    this.setState({
        email: '',
        password: ''
    });
}

validateForm = (email,password) => {

    if(email == "" || password == "") {
        return false;
    } else {
        return true;
    }
}

render() {

    return (
        <div> 
            <form method="POST" onSubmit={event => this.Login(event)}>
                {loginForm.map( (form,index) => (

                    <div className="form-group">
                        <input type={form.type} name={form.name} className="form-control" placeholder={form.placeholder} value={this.state.form.name} onChange={event => this.getInput(event)}/>
                    </div>
                    ))
                }

                <button type="submit">Sign in</button>
            </form>

        </div>
       );
   }
}
4

2 回答 2

1 
<input 
                        type={form.type} 
                        name={form.name} 
                        className="form-control" 
                        placeholder={form.placeholder} 
                        value={this.state[form.name]} 
                        onChange={this.getInput}
                     />
于 2019-01-04T22:41:45.943 回答
0

我刚刚重做了你的代码。你真的很亲近。

只需将您的值更改为<input />以下值：

value={this.state[form.name]}

原因 - 你的状态看起来像这样。

state = {
   "email":["sample@email.com"],
   "password":["somethingsecure"]}
}

如果您尝试访问this.state.form.name，您会注意到对象中没有表单属性，因此它是未定义的。

如果form.name是，'email'那么您需要像这样动态访问：

value={this.state[form.name]}->value={this.state['email']}

于 2019-01-04T22:41:26.647 回答