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中输入文本并单击Next Button时，它会显示名字，姓氏，电子邮件和注册按钮。

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

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

React Native更新占位符TextInput

1 个答案: