在文本字段中键入时选项卡切换为空答案

【问题标题】：Tabs switched to empty while typing in a textfield在文本字段中键入时选项卡切换为空
【发布时间】：2016-07-02 08:19:09
【问题描述】：

标签组件中有三个标签A，B，C。在选项卡 C 形式的 TextField 中键入一个字符。突然选项卡切换为空，没有选择任何选项卡。

部门： "material-ui": "^0.15.0-alpha.1", "react": "*", "react-dom": "^0.14.3", "react-tap-event-plugin": "^0.2.2" "electron-prebuilt": "^0.36.0"

//setting.jsx
'use babel';

import React from 'react';
import ReactDOM from 'react-dom';
import TextField from 'material-ui/lib/text-field';
import RaisedButton from 'material-ui/lib/raised-button';

var Settings = React.createClass({
    render(){
        return (
            <form>
                <TextField
                    hintText="username"
                    floatingLabelText="please enter username"
                    type="text"
                />
                <TextField
                    hintText="password"
                    floatingLabelText="please enter password"
                    type="text"
                />
                <RaisedButton type="submit" label="login" className="button-submit" primary={true} />
            </form>
        );
    }
});

export default Settings;

//TabNav.jsx
'use babel';

import fs from 'fs';
import React from 'react';
import ReactDOM from 'react-dom';
import Tabs from 'material-ui/lib/tabs/tabs';
import Tab from 'material-ui/lib/tabs/tab';
import FontIcon from 'material-ui/lib/font-icon';

import Settings from '../views/Settings.jsx';
import Timetable from '../views/Timetable.jsx';
import Notes from '../views/Notes.jsx';

class TabNav extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 'timetable'
        };
        this.CourseJsonData = JSON.parse(fs.readFileSync('data/courses.json', 'utf8'));
    }

    handleChange = (value) => {
        this.setState({
            value: value
        });
    };

    render() {
        return (
            <Tabs value={this.state.value} onChange={this.handleChange}>
                <Tab value="timetable" icon={<FontIcon className="material-icons">view_list</FontIcon>}>
                    <Timetable data={this.CourseJsonData}/>
                </Tab>
                <Tab value="notes" icon={<FontIcon className="material-icons">assignment_turned_in</FontIcon>}>
                    <Notes/>
                </Tab>
                <Tab value="settings" icon={<FontIcon className="material-icons">settings</FontIcon>}>
                    <Settings/>
                </Tab>
            </Tabs>
        );
    }
}

export default TabNav;

before-entering

然后按任意键一次。

after-entering

【问题讨论】：

我们需要代码，我们需要更多代码
@ZekeDroid 已添加。
你是什么意思“标签切换到空”？
@ZekeDroid 添加了几张说明性图片。请看图片。

标签： reactjs electron material-ui

【解决方案1】：

您遇到了 material-ui 错误：

https://github.com/callemall/material-ui/issues/2189

解决方法是将 onChange 处理程序添加到您的文本输入：

            <TextField
                hintText="username"
                floatingLabelText="please enter username"
                type="text"
                onChange={(e)=>{e.stopPropagation();}}
            />
            <TextField
                hintText="password"
                floatingLabelText="please enter password"
                type="text"
                onChange={(e)=>{e.stopPropagation();}}

【讨论】：