React Native - Redux - 부모에서 자식으로 값 전달

Question

페이지 구성 요소의 값을 컨테이너 구성 요소로 전달하는 데 어려움이 있습니다. 또한 양식에 Tcomb-form-native도 사용하고 있습니다.

기본적으로 버튼을 클릭하면 AuthenticatePage의 양식에서 AuthenticateContainer 구성 요소로 값을 전달하여 로그인하는 데 사용하고 싶습니다. 가장 좋은 방법은 아닌지 잘 모르겠습니다. 도움을 주시면 대단히 감사하겠습니다! 여기 내 지금까지 코드의

:

AuthenticatePage.js이

'use strict' 
 

 
import React, { Component, PropTypes } from 'react'; 
 
import {Text, View, TouchableHighlight, AlertIOS} from 'react-native'; 
 
import t from 'tcomb-form-native' 
 
import _ from 'lodash' 
 
import EStyleSheet from 'react-native-extended-stylesheet' 
 
import ViewContainer from '../ViewContainer' 
 

 
var Form = t.form.Form; 
 

 
var User = t.struct({email: t.String, password: t.String}); 
 

 
const options = { 
 
    auto: 'placeholders', 
 
    fields: { 
 
     email: { 
 
      autoCapitalize: 'none', 
 
      autoCorrect: false 
 
     }, 
 

 
     password: { 
 
      autoCapitalize: 'none', 
 
      autoCorrect: false, 
 
      password: true, 
 
      secureTextEntry: true 
 
     } 
 
    } 
 
}; 
 

 
export default class AuthenticatePage extends Component { 
 
    static propTypes = { 
 
     doLogin: PropTypes.func.isRequired, 
 
     email: PropTypes.string, 
 
     password: PropTypes.string, 
 
     error: PropTypes.string.isRequired 
 
    }; 
 

 
    constructor(props) { 
 
     super(props); 
 
    } 
 

 
    submitLogin (e) { 
 
     e.preventDefault(); 
 
     var value = this.refs.form.getValue(); 
 
     console.log(value); 
 
     return(() => this.props.doLogin(value)); 
 
    } 
 

 
    render() { 
 
     return (
 
      <ViewContainer> 
 
       <Text> 
 
        Welcome to Poqet! 
 
       </Text> 
 
       <View> 
 
        <Form 
 
         ref="form" 
 
         type={User} 
 
         options={options}/> 
 
       </View> 
 
       <View> 
 
        <TouchableHighlight 
 
         onPress={this.submitLogin.bind(this)} 
 
         underlayColor='#99d9f4'> 
 
          <Text>{_.capitalize('Login')}</Text> 
 
        </TouchableHighlight> 
 
       </View> 
 
      </ViewContainer> 
 
     ) 
 
    } 
 
}

AuthenticateContainer.js

'use strict' 
 

 
import React, { Component, PropTypes } from 'react'; 
 
import AuthenticatePage from '../../components/Authenticate/AuthenticatePage' 
 
import { connect } from 'react-redux'; 
 
import { bindActionCreators } from 'redux' 
 
import * as sessionActionCreators from '../../redux/session'; 
 
import {Actions, ActionConst} from 'react-native-router-flux' 
 

 
class AuthenticateContainer extends Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      value: { 
 
       email: '', 
 
       password: '' 
 
      } 
 
     }; 
 
    } 
 

 
    handleLogin() { 
 
     console.log(value) 
 
     this.props.doLogin(value.email, value.password) 
 
      .then(console.log("Login Succecss")) 
 
    } 
 

 
    render() { 
 
     return (
 
      <AuthenticatePage 
 
       doLogin = {this.handleLogin.bind(this)} 
 
       error = {this.props.error}/> 
 
     ); 
 
    } 
 
} 
 

 
AuthenticateContainer.propTypes = { 
 
    doLogin: PropTypes.func.isRequired, 
 
    email: PropTypes.string, 
 
    password: PropTypes.string, 
 
    error: PropTypes.string.isRequired 
 
}; 
 

 
export default connect(
 
    (state) => ({isFetching: state.session.isFetching, error: state.session.error}), 
 
    (dispatch) => bindActionCreators(sessionActionCreators, dispatch) 
 
)(AuthenticateContainer)

고맙습니다!

마탄 Gubkin의 반응에 따라

편집 코드 :

AuthenticateContainer.js

'use strict' 
 

 
import React, { Component, PropTypes } from 'react'; 
 
import AuthenticatePage from '../../components/Authenticate/AuthenticatePage' 
 
import { connect } from 'react-redux'; 
 
import { bindActionCreators } from 'redux' 
 
import * as sessionActionCreators from '../../redux/session'; 
 
import {Actions, ActionConst} from 'react-native-router-flux' 
 

 
class AuthenticateContainer extends Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      value: { 
 
       email: '', 
 
       password: '' 
 
      } 
 
     }; 
 
    } 
 

 
    handleLogin(value) { 
 
     console.log(value) 
 
     this.props.doLogin(value.email, value.password) 
 
      .then(() => Actions.tabbar()) 
 
    } 
 

 
    render() { 
 
     return (
 
      <AuthenticatePage 
 
       doLogin = {this.handleLogin.bind(this)} 
 
       error = {this.props.error}/> 
 
     ); 
 
    } 
 
} 
 

 
AuthenticateContainer.propTypes = { 
 
    doLogin: PropTypes.func.isRequired, 
 
    email: PropTypes.string, 
 
    password: PropTypes.string, 
 
    error: PropTypes.isRequired 
 
}; 
 

 
export default connect(
 
    (state) => ({isFetching: state.session.isFetching, error: state.session.error}), 
 
    (dispatch) => bindActionCreators(sessionActionCreators, dispatch) 
 
)(AuthenticateContainer)

AuthenticatePage.js

,717 73,210

Answer 1

그것은 그들이 진짜로 유지 보수가되지 않고 훨씬 더 복잡 개인적으로 나는 가능하면 심판을 피하기 위해 선호, 같은 간단한 작업에 대한 심판을 사용하는 정말 나쁜 좋습니다. tcomb-form-native 구성 요소에는 onChange 이벤트가 있습니다.

내가 당신이라면 내가 이런 식으로 할 것이다 :

constructor(props) { 
    super(props); 

    this.state = { value: '' } 
} 


onChangeForm(value) { 

    this.setState({value: value); 

} 

render() { 

    <View> 
    ... 
     <Form .. ... onChange={ this.onChangeForm.bind(this) } /> 
     <SomebuttonComponent onPress={ this.props.doLogin(this.state.value) } /> 
    </View> 
} 

및 다음 구성 요소에

, 단순히 값에 액세스 할 수 this.props.value를 호출합니다.