material-ui：輸入改變標籤'this.state.value

我使用Material-UI作爲React應用程序。我正在使用可控制的Tabs和Tab組件。在推薦的設置中，this.state.value用於確定哪個選項卡處於打開狀態。當我在選項卡內的input字段中輸入文本時，它將this.state.value更改爲SyntheticEvent。即使輸入框位於單獨的組件中，也會發生這種情況。結果，當前選項卡被關閉。我想阻止輸入文本關閉當前選項卡。請提出建議？material-ui：輸入改變標籤'this.state.value

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

來源

2016-01-19 Nico

這聽起來像你使用你的投入，你使用你的標籤一樣'onChange'功能。你能顯示輸入代碼嗎？ –

沒有輸入代碼。這只是一個普通的html 5標籤。 – Nico

你被this issue擊中。一個簡單的方法來解決它是做一個類型檢查的handleChange像 -

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

來源

2016-01-20 09:10:41 hazardous

material-ui：輸入改變標籤'this.state.value

回答

相關問題