Как отправить форму в React Native

Я чувствую себя сумасшедшим, задавая этот вопрос здесь, но я не могу найти никаких хороших руководств о том, как отправить форму и получить данные для RN. Все, что я нахожу, это то, что кто-то подталкивает библиотеку "просто npm install react-native-form-genie-magic-box и вызывайте ее в своем проекте"...

но я просто хочу знать - Как отправить форму в 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>
  )
}

Вопрос. Как я могу просто перехватить отправленный адрес электронной почты и пароль в функции handleLogin AuthContainer?


react-native reactjs javascript native-base
person tomtom    schedule 02.07.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

На <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 или это может быть .js, у которого есть форма (это проще)

person Brunaine    schedule 03.07.2017
comment
Ах интересно. Таким образом, подход в RN состоит в том, чтобы просто использовать контролируемые входные данные на 100%, когда вы сохраняете значения из входных данных после каждого изменения, а нажатие кнопки просто вызывает некоторую функцию, которая что-то делает с этими данными. Я собирался использовать неконтролируемый подход к вводу, но это сработает. Спасибо за хороший ответ - person tomtom; 03.07.2017

arrow_upward
0
arrow_downward

Привет, вы можете использовать следующий URL-адрес для реализации формы в реакции. https://github.com/davidkpiano/react-redux-form/issues/ 383

person Kamalkant Gaur    schedule 03.07.2017