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

Question

一个tabs组件中有A、B、C三个tab。在选项卡 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

Answer 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();}}

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

Tabs switched to empty while typing in a textfield

reactjs

electron

material-ui