javascript - 输入字段值在一个区域工作而不在另一个区域工作
问题描述
我正在用 ReactJS 设计我的网站,但遇到了问题。该网站的桌面版完美运行!但是手机版有一个问题:我的输入框声称没有任何价值!我将在下面发布代码,但基本上桌面版在顶部的工具栏中有电子邮件注册(这是它工作的地方),而移动版在我的链接所在的侧抽屉中有它(在这里不起作用)。
应用程序.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>
);
};
注册.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。我认为它将被视为在不同位置呈现的同一个输入框,但它实际上将其视为两个单独的输入。我将在这里发布我如何修复它:
应用程序.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
注册.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!
解决方案
看来您有两个具有相同 ID“电子邮件”的元素。它使您的 html 无效,并且似乎强制getElementById
返回一个 elem 来选择。我的猜测是它从工具栏中选择了一个(因为它更高)。我认为您应该有条件地显示其中一个或给他们不同的 ID。
推荐阅读
- vb.net - 从 zkemkeeper vb.net 中的 OnAttendance 事件中识别发件人
- java - 如何保护我的 android 应用程序和与我的 MySql 服务器通信的 PHP 文件之间的连接?
- kubernetes - 我可以使用端口 80 和 443 的 EKS NodePort 服务吗
- reactjs - 尝试在终端上运行文件夹时无法在反应中编译错误
- machine-learning - 在 VAE 的解码器部分,如何将 NN 视为 p(x|z)?
- javascript - 如何在 html 表体部分中显示数据库中的所有记录
- python - 熊猫滚动窗口多列
- powershell - 将类中对象的事件处理程序连接到同一类中的方法
- typescript - 这个 TypeScript 函数参数是如何工作的
- javascript - 使用 JS 如何检测我悬停的颜色?