reactxネイティブ0.32.0で動作するredux-form 6.0.2を取得できません

Question

react-nativeでredux-formを使用しようとしていましたが、最も単純なフォームが動作しません。

私は2つの問題を抱えて：

1. 私はTextInputコンポーネントにprops.inputをバインドする場合は、すべてのキー入力が食べられますし。あなたは入力された文字を一瞬見て、それは消えます。 試行錯誤の結果、props.input.valueをバインドしないと、入力した文字がフィールドに表示されることが判明しました。

2. 私のサブミット機能は、常に空の値の引数を渡されます。

// @flow 
import React, { PropTypes } from 'react' 
import { 
    StyleSheet, 
    Text, 
    TextInput, 
    TouchableHighlight, 
    View, 
} from 'react-native' 
import { reduxForm, Field } from 'redux-form' 

const styles = StyleSheet.create({ 
    form: { 
    flex: 1, 
    flexDirection: 'column', 
    paddingLeft: 16, 
    paddingRight: 16, 
    }, 
    submitbutton: { 
    height: 48, 
    marginTop: 32, 
    }, 
    textfield: { 
    height: 28, 
    }, 
}); 

class TextInputField extends React.Component { 

    render() { 
    const { input, placeholder, style, input: { onChange } } = this.props 
    console.log(this.props) 
    return (
     <TextInput 
     onChange={onChange} 
     placeholder={placeholder} 
     style={style} 
     /> 
    ) 
    } 
} 

class SigninScene extends React.Component { 

    render() { 
    const { handleSubmit, submitting } = this.props 
    return (
     <View style={styles.form}> 
     <Field name="email" component={TextInputField} placeholder="email" style={styles.textfield}/> 
     <Field name="password" component={TextInputField} placeholder="password" style={styles.textfield}/> 
     <TouchableHighlight 
      onPress={handleSubmit((values, dispatch, props) => { 
      console.log("handling submit") 
      console.log(values) 
      })} 
     > 
      <Text style={styles.submitbutton}>Signin</Text> 
     </TouchableHighlight> 
     </View> 
    ) 
    } 
} 

export default reduxForm({ form: 'signin' })(SigninScene) 

Answer 1

まあ、1のために、あなたはこのような割り当てを構造化代入はできません。

const { input, placeholder, style, input: { onChange } } = this.props 

私はそれを理解するように、第一inputは「onChangeウォンようinputの内容を食べますすべて等しい。 Reduxの形式のGitHubのレポでこの問題に基づいて、その後

<TextInput 
    onChange={input.onChange} // <----- 
    placeholder={placeholder} 
    style={style} 

Answer 2

const { input, placeholder, style } = this.props 

としてみてください、私はコードを少し更新しましたが、まだそれが働いて得ることができません。状態にする代わりにマッピングするフィールド値の

https://github.com/erikras/redux-form/issues/1668

// @flow 
import React, { PropTypes } from 'react' 
import { 
    StyleSheet, 
    Text, 
    TextInput, 
    TouchableHighlight, 
    View, 
} from 'react-native' 
import { reduxForm, Field, formValueSelector } from 'redux-form' 
import { connect } from 'react-redux' 

const styles = StyleSheet.create({ 
    form: { 
    flex: 1, 
    flexDirection: 'column', 
    paddingLeft: 16, 
    paddingRight: 16, 
    }, 
    submitbutton: { 
    height: 48, 
    marginTop: 32, 
    }, 
    textfield: { 
    height: 28, // have to do it on iOS 
    marginTop: 32, 
    }, 
}); 

class TextInputField extends React.Component { 

    render() { 
    const { input: { onChange, value }, ...otherProps } = this.props 
    console.log(this.props) 
    return (
     <TextInput 
     onChangeText={(value) => onChange(value)} 
     value={value} 
     {...otherProps} 
     /> 
    ) 
    } 
} 

class SigninScene extends React.Component { 

    render() { 
    console.log(this.props) 
    const { handleSubmit, submitting } = this.props 
    return (
     <View style={styles.form}> 
     <Field name="email" component={TextInputField} placeholder="email" style={styles.textfield}/> 
     <Field name="password" component={TextInputField} placeholder="password" style={styles.textfield}/> 
     <TouchableHighlight 
      onPress={handleSubmit((values, dispatch, props) => { 
      console.log("handling submit") 
      console.log(values) 
      })} 
     > 
      <Text style={styles.submitbutton}>Signin</Text> 
     </TouchableHighlight> 
     </View> 
    ) 
    } 
} 

SigninScene = reduxForm({ 
    form: 'signin' 
})(SigninScene) 

const selector = formValueSelector('signin'); 

function mapStateToProps(state){ 
    return { 
     email: selector(state, 'email'), 
     password: selector(state, 'password'), 
    } 
} 

SigninScene = connect(mapStateToProps)(SigninScene) 

export default SigninScene 

Answer 3

、これを試してみてください。私はあなたはまだ疑問を持った場合、オープンソース化は、Reduxのフォームでネイティブスターターアプリを反応させてい

const mapStateToprops = (state: State) => ({ 
}); 

export default reduxForm({ 
    form: 'signin' 
})(
    connect(mapStateToprops)(SigninScene) 
); 

Answer 4

は私に

https://github.com/DimitriMikadze/firebase-react-native-redux-starter