Question

我在这里问这个问题很疯狂，但是我找不到任何好的教程，介绍如何提交表格并为RN捕获数据。我找到的所有东西都是有人推动一个库“只需要安装react-native-form-genie-magic-box并在你的项目中调用”......

但我只是想知道 - 如何以香草 React Native 提交表单。

示例代码：
的 AuthContainer

setLocalDescription

登录

class AuthContainer extends Component {
  render() {
    const {  errorMessage, handleLogin } = this.props
    return (
     <Login
       errorMessage={errorMessage}
       onLoginClick={(e) => handleLogin(e)}
     />
    )
  }
}
.....

const mapDispatchToProps = (dispatch) => {
  return {
    handleLogin: (e) => {
      e.preventDefault()
      const form = e.target
      const data = serialize(form, {hash: true})
      const creds = { email:data.email, password: data.password }
      dispatch(loginUser(creds))
    },
  }
}

问题：如何在AuthContainer的import { Container, Content, Form, Item, Input, Label, Button, Text } from 'native-base'; .... const Login = ({errorMessage, onLoginClick}) => { return ( <Container> <Content> <Form > {errorMessage && <Text>{errorMessage}</Text> } <Item floatingLabel> <Label>Email</Label> <Input type="email" name="email" /> </Item> <Item floatingLabel last> <Label>Password</Label> <Input secureTextEntry={true} /> </Item> <Button onPress={onLoginClick} ><Text>Sign in</Text></Button> </Form> </Content> </Container> ) }功能中捕获提交的电子邮件和密码？

Answer 1

您好，您可以使用以下网址进行反应中的表单实现。 https://github.com/davidkpiano/react-redux-form/issues/383

Answer 2

在<input上你需要添加类似的东西，例如：

<Input onChangeText={(text) => this.setState({username: text})} value={this.state.username}

当你使用onPress函数时，你只需要获取this.state.username并在需要时使用它。我通常不会执行处理Login或其他.js内容的函数，因此您需要将this.state.username传递给处理它的page。

如果我真的需要将某些内容传递给其他page，我通常会使用GLOBALS，例如：

// globals.js 
module.exports = {
  username: '',
};

然后使用globals.js

// import the globals.js
GLOBAL = require('./globals');

<Input onChangeText={(text) => this_onButtonPressed(text) value={this.state.username}/>

_onButtonPressed(text){
  GLOBAL.username = this.state.username
  // call function that handles it
}

然后在处理它的page上，您需要再次import并使用GLOBAL.username。

如果您不理解，请告诉我我会尝试更好地解释它，我需要知道您是否要在login上处理.js，或者它可以在{ {1}}具有表单（它更容易这样）

如何在React Native中提交表单

2 个答案: