反應原生組件按鈕不啓用

import React from 'react'; 
import { 
    View, 
    Text, 
    Button, 
    TextInput, 
    StyleSheet 
} from 'react-native'; 
const username = null; 

const SetupForm = ({onSubmit}) => { 

    this.handleUsernameInput = (text) => { 
     username = text; 
    } 
    this.handleSetupSubmit = (event) => { 
     onSubmit(event, username); 
    } 
    this.handleSkipSubmit = (event) => { 
     onSubmit(event, false); 
    } 

    return (
     <View> 
      <Text>Enter username:</Text> 
      <TextInput 
       placeholder="Username" 
       maxLength={20} 
       onSubmitEditing={this.handleSetupSubmit} 
       onChangeText={this.handleUsernameInput} 
       style={{ marginLeft: 20, marginRight: 20 }} 
       /> 
      <View> 
      <Button 
       title="Select" 
       onPress={this.handleSetupSubmit} 
       color="#34A853" 
       disabled={username === null} 
       /> 

      <Button 
       title="Maybe Later" 
       onPress={this.handleSkipSubmit} 
       color="red" 
       /> 
      </View> 
     </View> 
    ); 
} 


export default SetupForm;

我有這個安裝表單的問題。它具有我設置爲用戶輸入的值的用戶名文本框。 onChangeText={this.handleUsernameInput}反應原生組件按鈕不啓用

對於選擇按鈕我已設置disabled當username === null但是，在文本框中輸入文本時，這絕不會變成錯誤。

文本框設置打字時設置的用戶名，我可以在其正常工作控制檯中看到，當我按下通過鍵盤按鈕提交與終極版動作

{type: "SETUP.REQUEST", username: "aaaaaaa"}

是有什麼我在這裏做錯了，當文本被this.handleUsernameInput方法設置時，按鈕沒有被啓用？

如GIF： http://i.imgur.com/OuMkxHA.gifv

我必須單擊用戶名輸入後，跳過按鈕，使按鈕啓用（綠色環保），我希望這能同時輸入

來源

2017-08-24 user2950720

檢查，看看你的渲染功能被再次召喚。我懷疑這不是因爲你的'username'不是一個道具或狀態變量。由於渲染函數不會再次被調用，所以'disable' prop不會被重新評估。 –

就像在提到Garrett評論組件不會重新渲染，因爲當您更改文本輸入時，沒有道具或狀態的變化。您應該將功能組件更改爲ES6類，並將username保存到狀態中。有這樣的一個簡單的例子，在TextInput's documention

我不知道你的技能水平，但陣營的文檔有關的狀態和生命週期是一個很好看的，如果你是新的反應https://facebook.github.io/react/docs/state-and-lifecycle.html

來源

2017-08-25 04:51:17

反應原生組件按鈕不啓用

回答

相關問題