React native 反应文本输入的本机更新占位符

我正在尝试用setState更改TextInput的占位符。但这似乎不起作用

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

render（）{
返回(
);
}

如果我用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>

    );
}

constructor（）{
超级（）；
this.formSections={
第一:{
字段：[“用户名”、“密码”、“确认密码”]，
buttonText:“下一步”，
按钮操作：（）=>此按钮。_loadNext（）
},
第二：{
字段：[“名字”、“姓氏”、“电子邮件”]，
buttonText:“寄存器”，
按钮操作：（）=>警报（'向服务器注册'）
}
}
此.state={
currentFormSection:“第一个”
}
}
_loadNext（）{
这是我的国家({
currentFormSection:“第二个”
});
}
render（）{
返回(
{this.formSection[this.state.currentFormSection].buttonText}
);
}

---

我在这里试图实现的是对不同的表单字段使用相同的文本输入。此处占位符更新为空白。设置状态后，输入字段为空，没有值，也没有文本。但是，如果我在输入中键入一些内容并将其全部删除，则会显示更新的占位符。

我又更新了您的代码一次。只需复制并粘贴此代码。首先显示用户名、密码、确认密码和下一步按钮。当您在文本输入中输入文本并单击下一步按钮时，它会显示名字、姓氏、电子邮件和注册按钮

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

import React，{Component}来自'React'；
进口{
平台，
样式表，
文本，
文本输入，
可触摸不透明度，
看法
按钮
}从“反应本机”；
const指令=Platform.select({
ios:'按Cmd+R重新加载，\n'+
“用于开发菜单的Cmd+D或shake”，
android:“双击键盘上的R以重新加载，\n”+
'为开发菜单摇动或按下菜单按钮'，
});
导出默认类应用程序扩展组件{
构造函数（）{
超级（）；
this.formSections={
第一:{
字段：[“用户名”、“密码”、“确认密码”]，
buttonText:“下一步”，
按钮操作：（）=>此按钮。_loadNext（）
},
第二：{
字段：[“名字”、“姓氏”、“电子邮件”]，
buttonText:“寄存器”，
按钮操作：（）=>警报（'向服务器注册'）
}
}
此.state={
valueOfFirstInput:“”，
secondInput的值：“”，
第三个输入的值：“”，
currentFormSection:“第一个”
}
}
_loadNext（）{
这是我的国家({
valueOfFirstInput:“”，
secondInput的值：“”，
第三个输入的值：“”，
currentFormSection:“第二个”
});
}
render（）{
返回(
this.setState（{valueOfFirstInput:value}）}
/>
this.setState（{valueOfSecondInput:value}）}
/>
this.setState（{valueOfThirdInput:value}）}
/>
{this.formSection[this.state.currentFormSection].buttonText}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#abcdef”，
},
欢迎:{
尺寸：20，
textAlign:'中心'，
差额：10，
},
说明：{
textAlign:'中心'，
颜色：'#333333'，
marginBottom:5，
},
});

---

再试一次。可能对你有帮助。

这会有用的。当没有为指定值时，将显示占位符textinput@Sujan我已经发布了我的代码。你也可以告诉你的需求，你想在哪里更改占位符，然后我可以根据你的要求来尝试。@Deepak和Vicky我认为它应该可以工作，但在我的项目中，它表现得很奇怪。我已经用真实代码更新了，我做错什么了吗？谢谢。@Sujan更新了您的代码。请检查一下。我试过了，在我这边效果很好。如果你需要零钱，让我来know@sujan更新。再试一次。复制粘贴即可。它工作正常。我真的很感谢你这么做，但遗憾的是，这在我的设备上仍然不起作用，我将检查其他设备，看看这是否只是我的手机。我现在已经检查了2台android设备，但在这两台设备上仍然不起作用。@sujan更新。再试一次。复制粘贴即可。它工作正常。我也复制和粘贴了。。。已在两台设备上检查，仍然不工作。@sujan您能告诉我代码的输出是什么吗？