React之ref的使用方法

React之ref的使用方法

1、action-types

export const CUSTOM_CREATE = 'CUSTOM_CREATE';

2、reducer文件夹下面的 custom.js

import * as TYPES from '../action-types';

export default function Custom(state={
    data:[],
},action) {
    //为了防止直接修改原有的状态信息，我们把原有的深度克隆一份，return 的结果才是覆盖原有的信息
    state = JSON.parse(JSON.stringify(state));
    switch (action.type){
       case TYPES.CUSTOM_CREATE:
           let {payload} = action;
           state.data.push(payload);
           break;
    }
    return state
}

3、reducer文件夹下面的 index.js(将其导出)

import {combineReducers} from 'redux';
import Custom from './custom';
let reducer = combineReducers({
    Custom
});
export default reducer;

4、action文件夹下面的 custom.js

import * as TYPES from '../action-types';
let Custom = {
    //=>增加任务信息
    create(payload) {
        return {
            type: TYPES.CUSTOM_CREATE,
            payload
        }
    },
};
export default Custom;

5、action文件夹下面的 index.js(将其导出)

import Custom from './custom';
let action = {
    Custom
};
export default action;

6、Create.js

import React from 'react';
import {connect} from 'react-redux';
import  action from  '../../store/action'
class Create extends React.Component{
    constructor(props,context){
        super(props,context)
    }
    render(){
            let {data} =this.props;
        return <div>   
            用户编码：<input type="text" ref='USER_ID'/>
            <br/><br/>
            用户姓名：<input type="text" ref='USER_NAME'/>
            <br/><br/>
            <button onClick={this.submit}>增加用户</button>
        </div>
    }
    submit = ev => {
        let {USER_ID, USER_NAME} = this.refs,
            {create, history} = this.props;
        //=>DISPATCH
        create({
            id: USER_ID.value,
            name: USER_NAME.value
        });
        //=>GO LIST
        USER_ID.value = USER_NAME.value = '';
        history.push('/custom/list');
    };
}

export default connect(state =>({...state.Custom}),action.Custom)(Create)