Question

我是React Native的新手，但TextInput出现问题，它不会更新整个状态。它仅存储一个值：“登录”输入或“密码”输入

我用登录名和密码TextIput创建了登录页面。这是我的状态和TextInput的代码

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        login: "",
        password: "",

      }
    };
  }

      <View style={styles.inputContainer}>
            <View style={styles.inputEmail}>
              <TextInput
                dafeultValue={this.state.user.login}
                onChangeText={login => this.setState({ user: { login } })}
                placeholder="Enter Email"
                keyboardType="email-address"
              />
            </View>
            <View style={{ ...styles.inputEmail, marginTop: 25 }}>
              <TextInput
                defaultValue={this.state.user.password}
                onChangeText={password => this.setState({ user: { password } })}
                placeholder="Enter Password"
                keyboardType="email-address"
                autoCapitalize="none"
              />
            </View>
          </View>

我如何同时更新我的登录名和密码状态？

Answer 1

您要替换用户对象，您需要保留用户对象上已经存在的所有内容，然后更新正确的属性：

onChangeText={login => this.setState({ user: { ...this.state.user, login } })}
onChangeText={password => this.setState({ password: { ...this.state.user, password } })}

Answer 2

您一次将用户设置为一个值。那是：

class _ExampleDialogTextState extends State<ExampleDialogText> {
  FocusNode focusNode = FocusNode();
  final textController = TextEditingController();
  bool noText = false;
  String nameList = "";

  @override
  void initState() {
    super.initState();
    nameList = "";
    focusNode.addListener(() {
      if (!focusNode.hasFocus) {
        setState(() {
          noText = nameList.length == 0;
        });
        FocusScope.of(context).requestFocus(focusNode);
      }
    });
  }

TextField(
focusNode: focusNode,
autofocus: true,
controller: textController,
style: TextStyle(
color: Colors.black, fontSize: 14),
decoration: InputDecoration(
counterText: '',
errorText:
noText ? 'Value Can\'t Be Empty' : null,)

RaisedButton(
onPressed: () {
setState(() {
nameList.isEmpty
? noText = true
: noText = false;
});
},)

}

应该是：

login => this.setState({ user: { login } })

Answer 3

那是因为您没有保持状态。您需要保持状态。您在此处所做的就是丢失了在调用this.setState时在状态中先前设置的数据，例如：

<View style={styles.inputContainer}>
   <View style={styles.inputEmail}>
      <TextInput
         dafeultValue={this.state.user.login}
         onChangeText={login => this.setState({ user: { ...this.state.user, login } })}
         placeholder="Enter Email"
         keyboardType="email-address"
      />
   </View>
   <View style={{ ...styles.inputEmail, marginTop: 25 }}>
      <TextInput
         defaultValue={this.state.user.password}
         onChangeText={password => this.setState({ user: { ...this.state.user, password } })}
         placeholder="Enter Password"
         keyboardType="email-address"
         autoCapitalize="none"
      />
   </View>
</View>

希望这对您有用。

Answer 4

虽然每个人都给您正确的答案，但我想进一步解释一下为什么您的代码无法正常工作：

这是您的用户状态：

user: {
  login: "",
  password: ""
}

以下是您在电子邮件输入中的onChangeText：

onChangeText={login => this.setState({ user: { login } })}

使用这一行代码，如果您在电子邮件输入框中键入内容，则将user状态替换为：

user: { 
  login 
}

现在您失去了user.password状态，密码输入框也发生了同样的事情。

因此，要使其正常工作，只需在执行以下操作替换user / ...this.state.user状态之前，使用扩展运算符（login）复制处于password状态的所有内容：

onChangeText={
  login => this.setState({ 
    user: { 
      ...this.state.user, 
      login 
    } 
  })
}

onChangeText={
  password => this.setState({ 
    password: { 
      ...this.state.user, 
      password 
    } 
  })
}

React Native TextInput确实将值传递给状态

4 个答案: