翻译|Simple React Native forms wit

作者: smartphp | 来源:发表于2017-04-03 20:07 被阅读792次

title: 翻译|Simple React Native forms with redux-form, immutable.js and styled-components - Esben Petersen
date: 2017-04-03 16:07:15
categories: 翻译
tags: Redux

在React中处理表单还不怎么好弄,看看这篇文章讲的挺好的看看,试着翻译一下
原文请参看原文

start

如果你想看看怎么在react-native 想使用redux-form和immutable.js.你看可以看看这篇文章的代码

Introduction

在Traede,我使用redux整合redux-form来创建表单.redux-form是一个非常好的库,但是没有什么好的示例代码介绍怎么和React-native配合使用.所以当我开始在React-Natvie中使用redux-form的时候,发现还是有一点难度的.大多数的情况都因为我发现在React-Native中使用Immutable.js的时候会中断redux-form运行的bug.Redux-form主版本号已经到了6.4.2了.所以我考虑可以根据我的学习过程来写一点怎么在应用中同时使用redux-form和Immutable.js的文档.

Agenda

大体的步骤是:

看看redux-form在native和web之间的差异点
看看怎么使redux-form和Immutable.js一起使用
使用react-native-clean-form的完整实例

鸡冻不？好了,开始了

在React-native中使用redux-form

如果你不太熟悉redux-form,我建议你看看redux-form简单文档
.注意：这个指南假定你使用的redux-form的版本大于6.4.2.如果不是这个版本,并且还在使用Immutable.js,那么要看看这个issue.创建一个表单基础的三个步骤是:

在你的redux store中加入redux-form reducer
使用reduxForm包装器把你的表单连接到store
使用Field包装器把特定的表单字段连接到Store

0. 创建React Native 项目

假设你已经有了可以运行的React Native项目.如果没有,使用react-native init MyReduxFormProjct终端命令行命令也很容易创建项目.

1.把redux-form reducer添加到你的redux store

做这一步,请参考redux-form文档

2.使用redux-form包装器把你的form连接到store

我们使用一个简单的表单来开始工作.

import React from 'react'
import {
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View
} from 'react-native'

const Form = props => {
  return (
    <View style={styles.container}>
      <Text>Email:</Text>
      <TextInput style={styles.input} />
      <TouchableOpacity>
        <Text style={styles.button}>Submit</Text>
      </TouchableOpacity>
    </View>
  )
}

export default Form

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'blue',
    color: 'white',
    height: 30,
    lineHeight: 30,
    marginTop: 10,
    textAlign: 'center',
    width: 250
  },
  container: {

  },
  input: {
    borderColor: 'black',
    borderWidth: 1,
    height: 37,
    width: 250
  }
})

好了,我们已经有了表单,看起来和十亿美元级别的app差不多.下面我们需要使用reduxForm包装器把表单连接到redux form上.这是因为在表单中的每一个按键操作都会发送输入字段的值到store.当我们按下提交按钮,redux-form将会从store中获取保存的值发送到一个我们定制的回调函数.

 import { reduxForm } from 'redux-form'

const submit = values => {
  console.log('submitting form', values)
}

const Form = props => {
  const { handleSubmit } = props

  return (
    <View style={styles.container}>
      <Text>Email:</Text>
      <TextInput style={styles.input} />
      <TouchableOpacity onPress={handleSubmit(submit)}>
        <Text style={styles.button}>Submit</Text>
      </TouchableOpacity>
    </View>
  )
}

export default reduxForm({
  form: 'test'
})(Form)

注释：为了简单,省略了样式和对象的导入代码

好了,首先我们使用reduxForm包装form并连接到store.这是react-redux的基础版本之上的一点修改,可能你比较熟悉了.

接着,我们使用了redux-form的handleSubmit(这个函数是通过redux-Form注入到组件中的).submit函数附加到我们的submit按钮上,所以点击按钮的时候,表单会被提交.这一点和web开发的submit函数是不同的,web开发中这个函数附加到form元素上.在移动平台上没有form元素,所以我们直接把它添加到button上,或者TouchableOpaticy.就是这么回事.

到了这一步,可以使用模拟器运行代码试试.我高度推荐react-native-debugger作为Debugger.你可以看看React Native 有关degugging文档的建议.

当你在模拟器中试着点击提交表单时,你可以看到回调函数返回了空值.

值在哪里呢？

3.使用Field包装器把fields连接到store

所以说,redux-form要工作,你必须要使用Field包装器把每一个field连接到store.

 import { Field, reduxForm } from 'redux-form'

const submit = values => {
  console.log('submitting form', values)
}

const renderInput = ({ input: { onChange, ...restInput }}) => {
  return <TextInput style={styles.input} onChangeText={onChange} {...restInput} />
}

const Form = props => {
  const { handleSubmit } = props

  return (
    <View style={styles.container}>
      <Text>Email:</Text>
      <Field name="email" component={renderInput} />
      <TouchableOpacity onPress={handleSubmit(submit)}>
        <Text style={styles.button}>Submit</Text>
      </TouchableOpacity>
    </View>
  )
}

export default reduxForm({
  form: 'test'
})(Form)

注意,我们添加了Field组件,给定了name属性,和web开发中的inputfield工作是类似的.我们也添加了一个渲染函数告诉reduxForm,这个字段应该怎么渲染.(基本上就是一个TextInput组件).

现在这里有些小技巧,很多人可能会出错.所以留心一下.在web Reac中input组件中,当field的值发生变化时,触发一个onChange回调函数.在React Native中TextInput组件触发的是onChangeText回调函数.为了应对这个问题,我们手动添加变化的句柄onChangeText={onChange}.

现在当我们提交的时候,表单工作了.

使用Immutable.js时候也可以工作

如果你想在state的管理中使用immutable.js,那么需要一些额外的步骤了配合redux-form工作.我建议你读读使用immutable.js和redux-form的官方文档.但是我们通过一些步骤马上开始.

1.使用redux-immutablejs combineReducers和redux-form reducer的immutable版本

找到你穿件redux store的代码处

import { combineReducers } from 'redux-immutablejs'
import { reducer as form } from 'redux-form/immutable' // <--- immutable import

const reducer = combineReducers({ form })

export default reducer

这里有两件事:(1)你必须使用从redux-immutable或者redux-immutablejs注入combineReducers方法.重要的是输入的reducer是从redux-form/immutable.并不是redux-form.

2.使用reduxForm包装器和Field的immutable版本

这一步和第一步实际有点类似.当你在reduxForm中包装一个表单连接到redux store的时候,确保是从redux-form/immutable导入的.类似
Field也是从这里导入的.

import { Field, reduxForm } from 'redux-form/immutable' // <---- LOOK HERE

const submit = values => {
  console.log('submitting form', values.toJS()) <--- use toJS() to cast to plain object
}

const renderInput = ({ input: { onChange, ...restInput }}) => {
  return <TextInput style={styles.input} onChangeText={onChange} {...restInput} />
}

const Form = props => {
  const { handleSubmit } = props

  return (
    <View style={styles.container}>
      <Text>Email:</Text>
      <Field name="email" component={renderInput} />
      <TouchableOpacity onPress={handleSubmit(submit)}>
        <Text style={styles.button}>Submit</Text>
      </TouchableOpacity>
    </View>
  )
}

export default reduxForm({
  form: 'test'
})(Form)

3.完成了

就这些内容,是不是很简单？

加点样式组件让我们的app看起来像十亿美元级别的app

使用绝对酷炫的React样式库styled-components .
看看源代码esbenp/react-native-clean-form

第一步:安装react-native-clean-form

使用npm install —save react-native-clean-form安装form元素.
也需要vector icon fonts.Readme

第二步:设计酷炫的表单

看看代码

 import React, { Component } from 'react'
import {
  ActionsContainer,
  Button,
  FieldsContainer,
  Fieldset,
  Form,
  FormGroup,
  Label,
  Input,
  Select,
  Switch
} from 'react-native-clean-form'

const countryOptions = [
  {label: 'Denmark', value: 'DK'},
  {label: 'Germany', value: 'DE'},
  {label: 'United State', value: 'US'}
]

const FormView = props => (
  <Form>
    <FieldsContainer>
      <Fieldset label="Contact details">
        <FormGroup>
          <Label>First name</Label>
          <Input placeholder="John" />
        </FormGroup>
        <FormGroup>
          <Label>Last name</Label>
          <Input placeholder="Doe" />
        </FormGroup>
        <FormGroup>
          <Label>Phone</Label>
          <Input placeholder="+45 88 88 88 88" />
        </FormGroup>
        <FormGroup>
          <Label>First name</Label>
          <Input placeholder="John" />
        </FormGroup>
      </Fieldset>
      <Fieldset label="Shipping details" last>
        <FormGroup>
          <Label>Address</Label>
          <Input placeholder="Hejrevej 33" />
        </FormGroup>
        <FormGroup>
          <Label>City</Label>
          <Input placeholder="Copenhagen" />
        </FormGroup>
        <FormGroup>
          <Label>ZIP Code</Label>
          <Input placeholder="2400" />
        </FormGroup>
        <FormGroup>
          <Label>Country</Label>
          <Select
              name="country"
              label="Country"
              options={countryOptions}
              placeholder="Denmark"
          />
        </FormGroup>
        <FormGroup border={false}>
          <Label>Save my details</Label>
          <Switch />
        </FormGroup>
      </Fieldset>
    </FieldsContainer>
    <ActionsContainer>
      <Button icon="md-checkmark" iconPlacement="right">Save</Button>
    </ActionsContainer>
  </Form>
)

export default FormView

如果你比较熟悉Twitter Bootstrap你可以从react-native-clean-form中看到类似的句法.好了输入Input,Select和Switch.这里的元素已经被包装在FromGroup和Label.此外我们也支持验证

import React, { Component } from 'react'
import { reduxForm } from 'redux-form/immutable'
import {
  ActionsContainer,
  Button,
  FieldsContainer,
  Fieldset,
  Form
} from 'react-native-clean-form'
import {
  Input,
  Select,
  Switch
} from 'react-native-clean-form/redux-form-immutable'
import { View,Text } from 'react-native'

const onSubmit = (values, dispatch) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(values.toJS())
      resolve()
    }, 1500)
  })
}

const countryOptions = [
  {label: 'Denmark', value: 'DK'},
  {label: 'Germany', value: 'DE'},
  {label: 'United State', value: 'US'}
]

class FormView extends Component {
  render() {
    const { handleSubmit, submitting } = this.props

    return (
      <Form>
        <FieldsContainer>
          <Fieldset label="Contact details">
            <Input name="first_name" label="First name" placeholder="John" />
            <Input name="last_name" label="Last name" placeholder="Doe" />
            <Input name="email" label="Email" placeholder="something@domain.com" />
            <Input name="telephone" label="Phone" placeholder="+45 88 88 88 88" />
          </Fieldset>
          <Fieldset label="Shipping details" last>
            <Input name="address" label="Address" placeholder="Hejrevej 33" />
            <Input name="city" label="City" placeholder="Copenhagen" />
            <Input name="zip" label="ZIP Code" placeholder="2400" />
            <Select
              name="country"
              label="Country"
              options={countryOptions}
              placeholder="Denmark"
            />
            <Switch label="Save my details" border={false} name="save_details" />
          </Fieldset>
        </FieldsContainer>
        <ActionsContainer>
          <Button icon="md-checkmark" iconPlacement="right" onPress={handleSubmit(onSubmit)} submitting={submitting}>Save</Button>
        </ActionsContainer>
      </Form>
    )
  }
}

export default reduxForm({
  form: 'Form',
  validate: values => {
    const errors = {}

    values = values.toJS()

    if (!values.first_name) {
      errors.first_name = 'First name is required.'
    }

    if (!values.last_name) {
      errors.last_name = 'Last name is required.'
    }

    if (!values.email) {
      errors.email = 'Email is required.'
    }

    return errors
  }
})(FormView)

很简单，是吗？现在我们有了一个连接到store的好看的表单,还能支持数据验证,异步的按钮反馈.你可以在repository查看更多特性.

附加资料：你可能会有疑问，如果我要提交表单数据到服务器端怎么办呢？
作者在这里没有写出来.如果想了解可以参看这个repo

翻译|Simple React Native forms wit

start

Introduction

Agenda

在React-native中使用redux-form

0. 创建React Native 项目

1.把redux-form reducer添加到你的redux store

2.使用redux-form包装器把你的form连接到store

3.使用Field包装器把fields连接到store

使用Immutable.js时候也可以工作

1.使用redux-immutablejs combineReducers和redux-form reducer的immutable版本

2.使用reduxForm包装器和Field的immutable版本

3.完成了

加点样式组件让我们的app看起来像十亿美元级别的app

第一步:安装react-native-clean-form

第二步:设计酷炫的表单

The End

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Web前端之路

程序员

React-Native 开发阵营

React Native开发