代码之家  ›  专栏  ›  技术社区  ›  AltBrian

无法在react web app中添加电子邮件字段

  •  0
  • AltBrian  · 技术社区  · 6 年前

    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;
    

    现在我有了一个联系人页面,上面有姓名和电子邮件。现在我可以添加姓名,但不能添加电子邮件。因此,基本上,当我单击submit按钮时,我只会得到名称和名称旁边的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 回复  |  直到 6 年前
        1
  •  1
  •   Nathan Jones    6 年前

    你的问题可能是 addMember 取一个参数 data addMember(name, email) .

    addMember({name, email})

    MemberStore.members JSX的数组也采用两个参数,而它只应采用一个对象作为参数:

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

    请注意,我正在使用 ES6 Object Literal Property Value Shorthand 上面的语法。