reactjs - 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
    });
},