>

redux가 통합 된 다음 컴포넌트와이 컴포넌트를위한 감속기가 있습니다 :

import React, { Component } from 'react';
import classes from './generalinfo.css';
import { Link } from 'react-router-dom';
// import 'icheck/skins/flat/aero.css';
import { Checkbox, Radio } from 'react-icheck';
import { connect } from 'react-redux';

class GeneralInfo extends Component {
    render() {
        return (
            <div className={ classes.screen2 } >
                <table className={ classes.initial__survey__details__table }>
                    <thead>
                        <tr>
                            <td>
                                Gender    
                            </td>
                            <td>
                                    Age    
                            </td>     
                        </tr>     
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <input type="radio" name="customer_gender" onChange={ (e) => this.props.validateRadioInput(e) } />                                     
                                <label>Male</label>
                            </td>
                            <td>
                                <input type="radio" name="customer_age" onChange={ (e) => this.props.validateRadioInput(e) } />                                   
                                <label>Less than 35</label>
                            </td>     
                        </tr>
                        <tr>
                            <td>
                                <input type="radio" name="customer_gender" onChange={ (e) => this.props.validateRadioInput(e) } />                                    
                                <label>Female</label>
                            </td>
                            <td>
                                <input type="radio" name="customer_age" onChange={ (e) => this.props.validateRadioInput(e) } />                                    
                                <label>More than 35</label>
                            </td>     
                        </tr> 
                        <tr>
                            <td colSpan="2">
                                <Link to="/preferences" className={ [classes.btn , classes["btn--fullwidth"] , classes.btn__next  ].join(' ') } 
                                        onClick={ this._ToggleNextScreenButton } >
                                    Next
                                </Link>
                            </td>   
                        </tr>     
                    </tbody>   
                </table>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        infoObj : state.gen
    }
}
const mapDispatchToProps = dispatch => {
    return {
        validateRadioInput : (e) => dispatch({ type: 'VALI_RADIO_INP' , elem : e })
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(GeneralInfo);

onChange 를 볼 수 있듯이  나는 다음과 같은 기능을 수행한다 :

onChange={ (e) => this.props.validateRadioInput(e) }

어떻게 내 console.log 요소가 전달되면 내 감속기에서 정의되지 않은 경우 내 감속기는 다음과 같습니다.

const initialState = {
    genderRadioClick : false,
    ageRadioClick : false
}
const reducer = (  state = initialState , action , payload ) => {
    switch(action.type) {
        case "VALI_RADIO_INP":
            console.log(payload) // i get undefined here ! why ?
            return state        
    }
    return state;
}
export default reducer;

디스패처 기능은 다음과 같습니다 :

 validateRadioInput : (e) => dispatch({ type: 'VALI_RADIO_INP' , elem : e })

왜 내가 undefined 를 받고 있어요   event 를 통과하더라도 내 감속기에서  함수에?

참고 ::- e.target 를 통과하면  나는 e 를 통과하는 감속기에서 그것을 얻습니다.  나에게 undefined를 제공하고, 이것은 e 라는 사실과 관련이 있습니까?  객체입니까?

  • 이전 Amazon EMR에서 실행되는 Pyspark 용 팬더 설치
  • 다음 macos - Mac에서 lsof는 포트가 사용 중이 아니라고 말하지만 포트에 텔넷으로 연결할 수 있습니다