Reactjs React Native TextInput不会将值传递给状态

我是React Native的新手，遇到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>

类登录扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户：{
登录名：“，
密码：“”，
}
};
}
this.setState（{user:{login}}）
占位符=“输入电子邮件”
keyboardType=“电子邮件地址”
/>
this.setState（{user:{password}}}）
占位符=“输入密码”
keyboardType=“电子邮件地址”
autoCapitalize=“无”
/>

---

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

这是因为您没有维护状态。你需要维持这个状态。您在这里所做的是在调用

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>

this.setState（{user:{…this.state.user，login}}）
占位符=“输入电子邮件”
keyboardType=“电子邮件地址”
/>
this.setState（{user:{…this.state.user，密码}}}）
占位符=“输入密码”
keyboardType=“电子邮件地址”
autoCapitalize=“无”
/>

---

希望这对您有效。

这是因为您没有维护状态。你需要维持这个状态。您在这里所做的是在调用

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>

this.setState（{user:{…this.state.user，login}}）
占位符=“输入电子邮件”
keyboardType=“电子邮件地址”
/>
this.setState（{user:{…this.state.user，密码}}}）
占位符=“输入密码”
keyboardType=“电子邮件地址”
autoCapitalize=“无”
/>

---

希望这对您有用。

您正在替换用户对象。您需要保留用户对象上已有的内容，只需更新正确的属性：

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

---

要替换用户对象，您需要保留用户对象上已有的内容，只需更新正确的属性：

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

---

您一次只将用户设置为一个值。即:

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

应该是：

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

---

您一次只将用户设置为一个值。即:

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

应该是：

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

---

虽然每个人都在给你正确的答案，但我想进一步解释一下为什么你的代码不起作用：

以下是您的用户状态：

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

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

onChangeText

：

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

有了这行代码，如果您在电子邮件输入框中键入了内容，您将用以下内容替换

用户

状态：

user: { 
  login 
}

现在，您将丢失

用户.password

状态，密码输入框也会发生同样的情况

---

因此，要使其正常工作，只需使用扩展运算符（

…this.state.user

）复制

用户

状态下的所有内容，然后通过执行以下操作替换

登录

/

密码

状态：

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

---

虽然每个人都在给你正确的答案，但我想进一步解释一下为什么你的代码不起作用：

以下是您的用户状态：

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

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

onChangeText

：

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

有了这行代码，如果您在电子邮件输入框中键入了内容，您将用以下内容替换

用户

状态：

user: { 
  login 
}

现在，您将丢失

用户.password

状态，密码输入框也会发生同样的情况

---

因此，要使其正常工作，只需使用扩展运算符（

…this.state.user

）复制

用户

状态下的所有内容，然后通过执行以下操作替换

登录

/

密码

状态：

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