material-ui：输入改变选项卡'this.state.value

Question

我正在使用 Material-UI 作为 React 应用程序。我正在使用可控的 Tabs 和 Tab 组件。在推荐设置中，this.state.value 用于确定打开哪个选项卡。当我在选项卡内的 input 字段中输入文本时，它会将 this.state.value 更改为 SyntheticEvent。即使输入框位于单独的组件中，也会发生这种情况。结果，当前选项卡被关闭。我想防止输入文本关闭当前选项卡。请提出建议？

var React = require('react');
var Tabs = require('material-ui/lib/tabs/tabs');
var Tab = require('material-ui/lib/tabs/tab');

module.exports = React.createClass({
    getInitialState() {
        return {
            value: 'newGoal'
        };
    },
    handleChange(value) {
        this.setState({
            value: value
        });
    },
    render() {
        console.log("this.state.value at TABS:", this.state.value);
        return (
            <Tabs
                value={this.state.value}
                onChange={this.handleChange}
            >
                <Tab label="New Goal" value="newGoal" >
                    <input></input>
                </Tab>
                <Tab label="Existing Goal" value="existingGoal">
                </Tab>
            </Tabs>
        )
    }
});

Answer 1

你被 this issue 击中了。一种简单的修复方法是在 handleChange 中进行类型检查，例如 -

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

material-ui：输入改变选项卡'this.state.value

material-ui: input alters the tabs' this.state.value

reactjs

material-ui