React TextInputのネイティブ更新プレースホルダ

Question

setStateを使用してTextInputのプレースホルダを変更しようとしています。しかし、これは動作していないようです。

render() { 
    return (
     <TextInput 
      placeholder={this.state.useThisPlaceholder} 
     /> 
    ); 
} 

上記のコードをプレースホルダの代わりにvalue属性で試してもうまくいきます。この動作は許可されていないか、何か不足していますか？

ありがとうございます。

更新

constructor() { 

    super(); 

    this.formSections = { 
     first:{ 
      fields:['username', 'password', 'confirm password'], 
      buttonText:'Next', 
      buttonAction:() => this._loadNext() 
     }, 
     second:{ 
      fields:['first name', 'last name', 'email'], 
      buttonText:'Register', 
      buttonAction:() => alert('registering with the server') 
     } 
    } 

    this.state = { 
     currentFormSection:'first' 
    } 

} 

_loadNext() { 

    this.setState({ 
     currentFormSection:'second' 
    }); 

} 

render() { 

    return (

     <View 
      style={styles.container} 
     > 
      <TextInput 
       placeholder={this.formSections[this.state.currentFormSection].fields[0]} 
       style={styles.textInput} 
       underlineColorAndroid="transparent" 
       placeholderTextColor="rgba(255,255,255,1)" 
      /> 
      <TextInput 
       placeholder={this.formSections[this.state.currentFormSection].fields[1]} 
       style={styles.textInput} 
       underlineColorAndroid="transparent" 
       placeholderTextColor="rgba(255,255,255,1)" 
      /> 

      <TextInput 
       placeholder={this.formSections[this.state.currentFormSection].fields[2]} 
       style={styles.textInput} 
       underlineColorAndroid="transparent" 
       placeholderTextColor="rgba(255,255,255,1)" 
      /> 

      <TouchableOpacity 
       style={styles.formBtn} 
       onPress={this.formSections[this.state.currentFormSection].buttonAction} 
      > 
       <Text style={styles.formBtnText}> 
        {this.formSections[this.state.currentFormSection].buttonText} 
       </Text> 
      </TouchableOpacity> 

     </View> 

    ); 
} 

異なるフォームフィールドに同じテキスト入力を使用している何を私がここに実現しようとしています。ここで、プレースホルダは空白に更新されます。 setStateの後、入力フィールドは空白で、値もテキストもありません。しかし、入力に何かを入力してそれをすべて消去すると、更新されたプレースホルダが表示されます。

Answer 1

もう一度コードを更新しました。このコードをコピーして貼り付けるだけです。まず、ユーザー名、パスワード、パスワードを確認し、次のボタンを表示します。 TextInputsにテキストを入力して「次へ」ボタンをクリックすると、ボタンが表示され、ファーストネームとメールが表示されます。

import React, { Component } from 'react'; 
import { 
    Platform, 
    StyleSheet, 
    Text, 
    TextInput, 
    TouchableOpacity, 
    View, 
    Button 
} from 'react-native'; 

const instructions = Platform.select({ 
    ios: 'Press Cmd+R to reload,\n' + 
    'Cmd+D or shake for dev menu', 
    android: 'Double tap R on your keyboard to reload,\n' + 
    'Shake or press menu button for dev menu', 
}); 

export default class App extends Component { 
    constructor() { 
      super(); 
      this.formSections = { 
       first:{ 
        fields:['username', 'password', 'confirm password'], 
        buttonText:'Next', 
        buttonAction:() => this._loadNext() 
       }, 
       second:{ 
        fields:['first name', 'last name', 'email'], 
        buttonText:'Register', 
        buttonAction:() => alert('registering with the server') 
       } 
      } 
      this.state = { 
       valueOfFirstInput:'', 
       valueOfSecondInput:'', 
       valueOfThirdInput:'', 
       currentFormSection:'first' 
      } 
     } 

     _loadNext() { 

      this.setState({ 
       valueOfFirstInput:'', 
       valueOfSecondInput:'', 
       valueOfThirdInput:'', 
       currentFormSection:'second' 
      }); 
     } 

     render() { 

      return (

       <View style={styles.container}> 
        <TextInput style={{width:200}} 
         placeholder={this.formSections[this.state.currentFormSection].fields[0]} 
         value = {this.state.valueOfFirstInput} 
         onChangeText={value => this.setState({ valueOfFirstInput: value })} 
        /> 
        <TextInput style={{width:200}} 
         placeholder={this.formSections[this.state.currentFormSection].fields[1]} 
         value = {this.state.valueOfSecondInput} 
         onChangeText={value => this.setState({ valueOfSecondInput: value })} 
        /> 

        <TextInput style={{width:200}} 
         placeholder={this.formSections[this.state.currentFormSection].fields[2]} 
         value = {this.state.valueOfThirdInput} 
         onChangeText={value => this.setState({ valueOfThirdInput: value })} 
        /> 

        <TouchableOpacity 
         style={styles.formBtn} 
         onPress={this.formSections[this.state.currentFormSection].buttonAction} 
        > 
         <Text style={styles.formBtnText}> 
          {this.formSections[this.state.currentFormSection].buttonText} 
         </Text> 
        </TouchableOpacity> 

       </View> 

      ); 
     } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#abcdef', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
    instructions: { 
    textAlign: 'center', 
    color: '#333333', 
    marginBottom: 5, 
    }, 
}); 

もう一度お試しください。それがあなたを助けるかもしれない。