Material UI Tabs组件嵌入input标签,在输入时 Tab选中消失 tab框变白

发布于 2022-09-02 09:24:56 字数 2563 浏览 16 评论 0

不知道题目中描述的是否准确
代码+截图详细描述一下吧
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选中消失,里面内容也没有了
Tab选中消失,里面内容也没有了

手动点中登录
恢复原样,文本框中也有值
恢复原样,文本框中也有值

不知道是什么原因
有人遇到过这种情况吗?

第一次使用Material UI,遇到的坑很多欸~
踩过的亲们可以帮忙解决一下吗?谢谢啦~

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

守不住的情 2022-09-09 09:24:57

handleChange(value) {

if (typeof value != "string"){
    return;
}
this.setState({
    value: value
});

},

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文