ネイティブ還元フォームに反応しない初期値が表示されない

これはレフィックスフォームのコードです。私はenableReinitializeをtrueに設定し、反応形式の文書化に従った。ネイティブ還元フォームに反応しない初期値が表示されない

私はテスト目的のためだけにinitialValuesオブジェクトをハードコードしました。しかし、私のフォームはまだ初期化されていません。

import React, { Component } from 'react'; 
import { Container, Header, Body, Content, Title, Button, Text, Left, Icon, Right } from 'native-base'; 
import { Field, reduxForm } from 'redux-form'; 
import { connect } from 'react-redux'; 
import MyTextInput from './TextInput'; 
import { fetchProfileData } from '../../actions'; 

const validate = values => { 
    const error = {}; 
    error.email = ''; 
    error.name = ''; 
    error.mobile = ''; 
    let ema = values.email; 
    let nm = values.name; 
    let mob = values.mobile; 
    if (values.email === undefined) { 
    ema = ''; 
    } 

    if (values.name === undefined) { 
    nm = ''; 
    } 

    if (values.mobile === undefined) { 
    mob = ''; 
    } 

    if (ema.length < 8 && ema !== '') { 
    error.email = 'too short'; 
    } 

    if (!ema.includes('@') && ema !== '') { 
    error.email = '@ not included'; 
    } 

    if (nm.length > 8) { 
    error.name = 'max 8 characters'; 
    } 

    if (mob.length < 10 && mob !== '') { 
    error.mobile = 'min 10 digits'; 
    } 
    return error; 
}; 

class SimpleForm extends Component { 

    componentWillMount() { 
    this.props.fetchProfileData(); 
    } 

    render() { 
    const { handleSubmit } = this.props; 
    console.log(this.props.initialValues); 
    return (
     <Container> 
     <Header> 
      <Left> 
      <Button 
       transparent 
       onPress={() => this.props.navigation.navigate('DrawerOpen')} 
      > 
      <Icon name="menu" /> 
      </Button> 
      </Left> 
      <Body> 
      <Title>Profile</Title> 
      </Body> 
      <Right /> 
     </Header> 
     <Content padder> 
      <Field name='name' component={MyTextInput} label='Vendor Name' /> 
      <Field name='company_name' component={MyTextInput} label='Company Name' /> 
      <Field name='office_address' component={MyTextInput} label='Office Address' /> 
      <Field name='email' component={MyTextInput} label='Email' /> 
      <Field name='mobile' component={MyTextInput} label='Contact' /> 
      <Button block primary onPress={handleSubmit((values) => console.log(values))} style={{ marginTop: 20 }}> 
      <Text>Save</Text> 
      </Button> 
     </Content> 
     </Container> 
    ); 
    } 
} 

const mapStateToProps = state => { 
    return { 
    initialValues: { name: '[email protected]' } 
    }; 
}; 

SimpleForm = connect(mapStateToProps, { fetchProfileData } 
)(SimpleForm); 

export default reduxForm({ 
    form: 'test', 
    validate, 
    enableReinitialize: true 
})(SimpleForm);

出典

2017-10-29 user3412321

私はしばらくの間これを苦労してきました。私は小道具で何かを手に入れることはできませんでした。しかし、私はいくつかの初期状態のものが必要なので、これは私のために働く。それもあなたのために動作することを願っています。

-----これは、最初の値を1回だけ設定したい場合に有効です。

export default reduxForm({ 
    form: 'test', 
    validate, 
    initialValues: { name: '[email protected]' } 
})(SimpleForm);

編集：私は変数を渡す必要があるようでした。これは、mapStateToPropsで設定された変数に対して私の仕事ができました。私はあなたの設定は、それがフォームに状態と小道具をマッピングしているので、あなたの設定がうまくいかなかったと思う、それからreduxFormを追加します。それは別の方法である必要があるように見えます。

const mapStateToProps = (state) => { 
    return { 
    initialValues: { 
     name: 'foobar', 
    } 
    } 
} 

export default (connect(mapStateToProps, mapDispatchToProps)(reduxForm({ 
    form: 'groupForm', 
    enableReinitialize: true 
})(SimpleForm)))

出典

2017-10-29 23:38:41

ありがとうございました。 – user3412321

よろしくお願いします。それがうまくいけば、この問題を解決しようとしている将来の開発者を助ける答えとして私の印を付けてください。 –

ネイティブ還元フォームに反応しない初期値が表示されない

答えて

関連する問題