Material UI Tabs组件嵌入input标签,在输入时 Tab选中消失 tab框变白
不知道题目中描述的是否准确
代码+截图详细描述一下吧
SignTabs.jsx 登录/注册组件
"use strict";
import React from 'react';
import Tabs from 'material-ui/lib/tabs/tabs';
import Tab from 'material-ui/lib/tabs/tab';
import Paper from 'material-ui/lib/paper';
import TextField from 'material-ui/lib/text-field';
import RaisedButton from 'material-ui/lib/raised-button';
import SignUpForm from './SignUpForm.jsx';
const styles = {
headline: {
fontSize: 24,
paddingTop: 16,
marginBottom: 12,
fontWeight: 400,
},
formborder: {
height: 350,
width: 350,
marginRight: 50,
textAlign: 'center',
display: 'inline-block',
float:'right',
},
};
class SignTabs extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 'a',
};
}
handleChange(value) {
this.setState({
value: value,
});
};
render() {
return (
<Paper style={styles.formborder} zDepth={1}>
<Tabs
value={this.state.value}
onChange={this.handleChange.bind(this)}
>
<Tab label="登录" value="a" >
<div>
<h2 style={styles.headline}>登录你的账号</h2>
<form action="#" className="log_form" >
<input ref="email" type="text" placeholder="邮箱"/>
<input ref="password" type="password" placeholder="密码"/>
<input type="submit" value="确认" />
</form>
</div>
</Tab>
<Tab label="注册" value="b">
<div>
<h2 style={styles.headline}>注册你的账号</h2>
<SignUpForm />
</div>
</Tab>
</Tabs>
</Paper>
);
}
}
export default SignTabs;
在index.jsx渲染了
这里都没有问题
然后浏览器中
但是当输入内容时,变成了这样
Tab选中消失,里面内容也没有了
手动点中登录
恢复原样,文本框中也有值
不知道是什么原因
有人遇到过这种情况吗?
第一次使用Material UI,遇到的坑很多欸~
踩过的亲们可以帮忙解决一下吗?谢谢啦~
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
handleChange(value) {
},