Материал-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 
    }); 
},