如何在React Native中提交表单
我在这里问这个问题很疯狂,但是我找不到任何好的教程,介绍如何提交表格并为RN捕获数据。我找到的所有东西都是有人在推动图书馆只是npm安装react-native-form-genie-magic-box并在你的项目中调用它...
I feel crazy asking this question here, but I can't find any good tutorials for how to submit a form and capture the data for RN. Everything I do find is someone pushing a library "just npm install react-native-form-genie-magic-box and call it in your project"...
但我只想知道 - 如何以香草 React Native 提交表单。
but I just want to know - How to submit a form in vanilla React Native.
示例代码:
AuthContainer
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))
},
}
}
登录
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>
)
}
问题:如何在AuthContainer的 handleLogin $ c中捕获提交的电子邮件和密码$ c> func重刑?
Question: How can I just capture the submitted email and password in AuthContainer's handleLogin
function?
在< input
上你需要添加这样的东西,例如:
On the <input
you need to add something like this, example:
<Input onChangeText={(text) => this.setState({username: text})} value={this.state.username}
当你使用 onPress
函数时,你只需要获取this.state.username并在需要时使用它。
我通常不会执行一个函数来处理 Login
或其他 .js
中的内容所以你需要将 this.state.username
传递给处理它的页面
。
And when you use the onPress
function you just need to get the this.state.username and use it when you want.
I don't usually do a function that handle the Login
or something in other .js
so you need to pass the this.state.username
to the page
that handles it.
如果我真的需要将某些内容传递给其他页面
我通常会使用 GLOBALS
,例如:
What i usually do if I really need to pass something to other page
is using GLOBALS
, example:
// 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
}
然后在处理它的页面
上你需要再次导入
然后只使用GLOBAL.username。
And then on the page
that handles it you need to import
it again and just use GLOBAL.username.
如果您不明白它告诉我我会尝试更好地解释它,我需要知道你是否想要在另一个 .js
上处理登录
,或者它可以在 .js
有表格(这样更容易)
If you didn't understand it tell me I will try to explain it better, I need to know if you want to handle the login
on a different .js
or it can be on the .js
that has the Form (its easier like this)