Не удалось добавить поле электронной почты в веб-приложение реагирования - PullRequest
Новая
       7

Не удалось добавить поле электронной почты в веб-приложение реагирования

0 голосов
/ 30 ноября 2018

Я занимаюсь разработкой небольшого приложения React, которое интегрируется с Mobx.Я настроил магазин участников, который выглядит следующим образом: 

import {observable, action, computed} from 'mobx';

 class MemberStore {
@observable members = [];

@action addMember(data) {
    const existing = this.members;
    this.members = existing.concat(data);
}

@computed get memberCount() {
    return this.members.length;
 }

}
const store = new MemberStore();
export default store;

Теперь у меня есть страница контактов, которая имеет форму имени и электронной почты.Теперь я могу добавить имя, но не адрес электронной почты.Таким образом, в основном, когда я нажимаю кнопку отправки, я получаю только имя и 0 рядом с именем. 

import React, { Component } from 'react';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';
import Jumbotron from '../components/Jumbotron';
import {inject, observer} from 'mobx-react';

@inject('MemberStore')
@observer

class Contact extends Component {
 handleSubmit = (e) => {
    e.preventDefault();

    const member = this.member.value;
    const email = this.email.value;
    // const email = this.email.value;
    this.props.MemberStore.addMember(member, email);
    this.member.value = '';
    this.email.value = '';
}
render() {
    const {MemberStore} = this.props;

    return (
        <div>
            <Navbar />
            <Jumbotron title="Contact Page" subtitle="You want to get in touch"/>
            <div className="container">
               <h2>You have {MemberStore.memberCount} members.</h2>

               <form onSubmit={e => this.handleSubmit(e)}>
                   <input type="text" placeholder="Enter Your Name" ref={input => this.member = input }/>
                   <div>
                   <input type="text" placeholder= "Enter Your Email" ref={input => this.email = input }/>
                   </div>
                   <button>Submit</button>
               </form>
            <ul>
                {MemberStore.members.map((member,email) => (
                    <li key={member}>
                        {member}
                        {email}

                    </li>
                ))}
            </ul>
            </div>
            <Footer />
        </div>
    )
  }
 }

 export default Contact;

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 30 ноября 2018

Ваша проблема, вероятно, в том, что addMember принимает один параметр data, и вы передаете ему два параметра при его вызове: addMember(name, email).

Вы должны передать имя и адрес электронной почты ввместо этого:

addMember({name, email})

Ваш код, который отображает массив MemberStore.members в JSX, также принимает два параметра, когда он должен принимать только один объект в качестве параметра:

{MemberStore.members.map({member,email}) => (

Обратите внимание, что я использую синтаксис приведенный выше синтаксис .

...