输入字段值在一个区域工作而不在另一个区域工作

Question

我正在使用 ReactJS 设计我的网站，但遇到了问题。该网站的桌面版完美运行！但是手机版有一个问题：我的输入框声称没有任何价值！我将在下面发布代码，但基本上桌面版在顶部的工具栏中有电子邮件注册（这是它工作的地方），而移动版在我的链接所在的侧抽屉中有它（在这里不起作用)。

App.js

 addEmailSub = () => {
    var email = document.getElementById("email").value;
    mailerlite.addSubscriber(104625980, email).then(() => {
      this.setState({isSubscribed: true});
    });
  }

  render() {
    var backdrop;

    if(this.state.sideDrawerOpen) {
      backdrop = <Backdrop click={this.backdropClickHandler}/>;
    }
    return(
    
      <div>
        <Toolbar drawerClickHandler={this.drawerToggleClickHandler} addEmailSub={this.addEmailSub} isSubscribed={this.state.isSubscribed}/>
        <SideDrawer show={this.state.sideDrawerOpen} addEmailSub={this.addEmailSub} isSubscribed={this.state.isSubscribed}/>
        {backdrop}
        <Switch>
          <Route path="/books" component={Books} />
          <Route path="/events" component={Events} />
          <Route path="*" component={About} />
          
        </Switch>
    </div>
    );
  }
}

Toolbar.js（这是注册组件工作的地方）

const toolbar = props => (
    <header className="toolbar">
        <nav className="toolbar-navigation">
            <div className="toolbar-toggle">
                <DrawerToggleButton click={props.drawerClickHandler}/>
            </div>
            <div className="toolbar-logo">
                <img className="logo" src={logo}></img>
            </div>
            <SocialMedia />            
            <div className="spacer" />
            <div className="signup">
                <Signup addEmailSub={props.addEmailSub} isSubscribed={props.isSubscribed}/> //this works
            </div>
            
            <div className="spacer" />
            <div className="toolbar-nav-items">
                <ul>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/books">Books</Link></li>
                    <li><Link to="/events">Events</Link></li>
                </ul>
            </div>
        </nav>
    </header>
);

Sidedrawer.js

const sideDrawer = props => {
    var drawerClasses = 'side-drawer';
    if(props.show) {
        drawerClasses = 'side-drawer open';
    }
    
    return(
        <nav className={drawerClasses}>
            <ul>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/books">Books</Link></li>
                <li><Link to="/events">Events</Link></li>
            </ul>
            <div className="side-drawer-signup">
                <Signup addEmailSub={props.addEmailSub} isSubscribed={props.isSubscribed}/> //this does not work
            </div>
        </nav>
    );
    
};

Signup.js

const signup = props => {
    if(props.isSubscribed) {
        return(<div>
            <h3 className="signup-thanks">Thanks for signing up! Check your email :)</h3>
        </div>)
    }
    else{
        return(<div>
                <input id="email" className="signup-input" placeholder="Enter your email address"></input>
                <button onClick={props.addEmailSub} className="signup-button">Beta Read!</button>
            </div>);
    }
}

除非我忘记了如何阅读，否则我肯定我适当地传递了所有道具和功能，但 Sidedrawer 中的 Signup 组件不会捕获任何表单数据。我在 Reddit 上发帖并搜索了 Stackoverflow 的前几页，但找不到与我的确切问题有关的任何内容：输入字段在一个位置捕获文本而不是另一个位置。

编辑： 感谢 yjay，我让它正常工作了！他们是正确的，它正在寻找“电子邮件”的第一个输入 ID。我认为它将被视为在不同位置呈现的同一个输入框，但它实际上将其视为两个单独的输入。我将在这里发布我如何修复它：

App.js

    addEmailSub = () => {
    var email = document.getElementById("email").value;
    if (!email) { //this checks if the first input box has no value
      email = document.getElementById("sidebar-email").value; //this tells the website to look at the other input box
    }
    console.log('value of email is: ' + email); //VINDICATION
    mailerlite.addSubscriber(104625980, email).then(() => {
      this.setState({isSubscribed: true});
    });
  }

工具栏.js

<Signup inputID="email" addEmailSub={props.addEmailSub} isSubscribed={props.isSubscribed}/> //this is all I changed from above. Added inputID prop

Sidedrawer.js

<Signup inputID="sidebar-email" addEmailSub={props.addEmailSub} isSubscribed={props.isSubscribed}/> //this is all I changed here, just like toolbar, adding inputID as a prop with a different id

Signup.js

return(<div>
                <input id={props.inputID} className="signup-input" placeholder="Enter your email address"></input> //here I use the prop to dynamically change the id based on where it's being rendered
                <button onClick={props.addEmailSub} className="signup-button">Beta Read!</button>
            </div>);

及时修复，谢谢yjay！

Answer 1

您似乎有两个具有相同 ID“电子邮件”的元素。它使您的 html 无效，并且似乎强制返回一个元素的 getElementById 进行选择。我的猜测是它从工具栏中选择了一个（因为它更高）。我认为您应该有条件地显示其中一个或给他们不同的 ID。