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

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,遇到的坑很多欸~
踩过的亲们可以帮忙解决一下吗?谢谢啦~


handleChange(value) {

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

},

【热门文章】
【热门文章】