web-dev-qa-db-ja.com

React Nativeでフォームを送信する方法

私はここでこの質問をするのに夢中ですが、フォームを送信してRNのデータをキャプチャする方法についてのany良いチュートリアルが見つかりません。私が見つけたものはすべて、ライブラリをプッシュしている人です "npm install react-native-form-genie-magic-boxをプロジェクトで呼び出します"。 ..

しかし、私は知りたいだけです-バニラでフォームを送信する方法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関数でキャプチャするにはどうすればよいですか？

javascriptreactjsreact-nativenative-base
5
tomtom

こんにちは、フォームの実装に次のURLを使用できます。 https://github.com/davidkpiano/react-redux-form/issues/38

1
Kamalkant Gaur