Question

我正在构建一个登录表单，并使用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>
       );
   }
}

Answer 1

我只是重新输入了您的代码。而且您真的很亲密。

只需将<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']}

Answer 2

<input 
                        type={form.type} 
                        name={form.name} 
                        className="form-control" 
                        placeholder={form.placeholder} 
                        value={this.state[form.name]} 
                        onChange={this.getInput}
                     />

在reactjs数组映射中动态呈现值

2 个答案: