如何在EXPO中以編程方式啟用/禁用文本輸入？

Question

問題是我正在嘗試使用形式啟用/禁用表單中的字段

我已經嘗試按照本教程中的步驟進行操作

https://dev.to/skptricks/react-native-enable-and-disable-textinput-programmatically-1b99

到目前為止，這是我必須到達的地方

onPressButton = () => {  
  this.setState({ TextInputDisableStatus: false })  
}

              <TextInput
                label="Name"
                placeholder="Colin Molony"
                autoCapitalize="none"
                keyboardType="default"
                keyboardAppearance="default"
                returnKeyType="next"
                returnKeyLabel="Next"
                blurOnSubmit={false}
                selectTextOnFocus={true}
                style={styles.textInput}
                editable={this.state.TextInputDisableHolder}
            />

ProfileScreen.navigationOptions = {
  title: 'Profile Page',
  headerRight: (
    <Ionicons
        style={{padding: 15}}
        name={Platform.OS === 'ios' ? 'ios-create' : 'md-create'}
        size={26}
        onPress={this.onPressButton}
      />
  ),
};

當我單擊圖標時，出現以下錯誤this.setstate不是函數

Answer 1

我認為有一個命名問題。 我遵循了您的鏈接，作者在那里初始化了以下狀態：

constructor() {  
super();  
this.state = { TextInputDisableStatus: true }  
}  

在onPress方法中，您正在使用以下方式更新狀態：

onPressButton = () => {  
  this.setState({ TextInputDisableStatus: false })  
}

但是然后在TextInput內部，作者和您指的是

editable={this.state.TextInputDisableHolder}

這可能應該更改為：

editable={this.state.TextInputDisableStatus}

此外，您還需要更改：

onPressButton()  {  
  this.setState({ TextInputDisableStatus: false })  
}

和：

<Ionicons
    style={{padding: 15}}
    name={Platform.OS === 'ios' ? 'ios-create' : 'md-create'}
    size={26}
    onPress={() => this.onPressButton()}
  />