4

我正在为 React 应用程序使用 Material-UI。我正在使用可控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>
        )
    }
});
4

1 回答 1

3

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

handleChange(value) {
    if (typeof value != "string"){
        return;
    }
    this.setState({
        value: value
    });
},
于 2016-01-20T09:10:41.210 回答