ReactNative:TextInput在数据绑定上的value属性有奇怪的行为

Question

在一个react原生应用程序中，我用构建了一个使用value属性时无法键入的表单。每个新字符都将被删除，文本框将重新设置为以前表单中的状态。

class LoginScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
          username: 'nobody',
          password: '****'
        };
      }
    render() {
        return (
            <View style={styles.container}>
                   .......
                    <View style={styles.inputContainer}>
                        <TextInput
                            style={[styles.input, styles.whiteFont]}
                            placeholder="Username"
                            placeholderTextColor="#FFF"
                            value={this.state.username}
                        />

使用此代码不可能进行任何键入。当我去掉attibute的值时，一切都很好。但我想使用这个数据绑定。

如何处理具有数据绑定的TextInput元素？

更新：

我也尝试过这个，但没有成功：

                    <TextInput
                        style={[styles.input, styles.whiteFont]}
                        placeholder="Username"
                        placeholderTextColor="#FFF"
                        value={this.state.username}
                        ref= "username"
                        onChangeText={(username) => this.setState({username})}
                    />

Answer 1

您想在TextInput组件中添加如下事件处理程序，以将状态设置为用户输入的值onChangeText={(text) => this.setState({username: text})}