如何獲取checkbox的狀態(tài)并傳入redux中

我的問題

我想將這個頁面的用戶名和權限設置的checkbox信息傳到redux中。
并在另外頁面以列表的形式顯示出來。

幾個點不懂

如何在redux中獲取checkbox的狀態(tài)
我需要同時將用戶名的字符串和多個checkbox的選中信息一起傳出去，我需要怎么設計這個state的格式？

求大神指教~

圖片描述

class AddUser extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            userinfo : {
                // username :'',
                // usercheck1 : false,
                // usercheck2 : false,
                // usercheck3 : false,
                // usercheck4 : false,
                // usercheck5 : false,
            }
        }
    }
    onInputChangeName(e){
        let inputValue  = e.target.value;
        this.setState({
            userinfo : Object.assign(this.state.userinfo,{username : inputValue })
        });
    }
    onSubmitAdd(){
        store.dispatch(AddUser(this.state.userinfo));
        this.props.history.push('/layout/id');
    }
    render(){
        return(
            <div class="add_page">
                <TopNav />
                <div className="addmain">
                    <div className="addcenter">
                        <p class="adduser_title">添加用戶</p>
                        <div className="addtablebg">
                            <div className="addtable">
                                <div>用戶名</div>
                                <div><input type="text" class="adduser_inputname" placeholder="請輸入用戶名" onChange={e => this.onInputChangeName(e)}/></div>
                                <div>權限設置</div>
                                <div class="adduser_checkbox"> 
                                
                                    <div class="adduser_setitle">權限頁面</div>
                                    <div class="adduser_setitle">權限</div>

                                    <div>開發(fā)者權限</div>
                                    <div><input class="adduser_check" name="1" type="checkbox" onChange={e => this.onInputChange1(e)}/></div>
                                
                                    <div>體驗者權限</div>
                                    <div><input class="adduser_check" name="2" type="checkbox" onChange={e => this.onInputChange2(e)}/></div>
                            
                                    <div>登錄</div>
                                    <div><input class="adduser_check" name="3" type="checkbox" onChange={e => this.onInputChange3(e)}/></div>
                            
                                    <div>數(shù)據(jù)分析</div>
                                    <div><input class="adduser_check" name="4" type="checkbox" onChange={e => this.onInputChange4(e)}/></div>
                            
                                    <div>開發(fā)管理</div>
                                    <div><input class="adduser_check" name="5" type="checkbox" onChange={e => this.onInputChange5(e)}/></div>
                                
                                </div>
                            </div>
                            <button class="adduser_confirm" onClick={e => {this.onSubmitAdd(e)}}>確認添加</button>
                        </div>
                    </div>
                </div>
            </div>
            )
    }
}

回答

編輯回答

背叛者

你現(xiàn)在的寫法基本上沒有用到redux，下面是我改造了一下。
在redux中獲取checkbox的狀態(tài)：就是在點擊checkbox的時候，dispatch一個action，傳遞需要的參數(shù)（索引，是否選中），然后在對應的reducer函數(shù)中修改狀態(tài)。修改狀態(tài)成功后頁面上就能拿到最新的狀態(tài)，你提交、傳遞數(shù)據(jù)都可以用這個最新的狀態(tài)。
reducer部分

// state格式建議寫成這樣。權限使用一個數(shù)組，然后循環(huán)出來。
const initialState = {
  userinfo: {
    userName: '',
    permission: [{
      name: '開發(fā)者權限',
      checked: true,
    }, {
      name: '體驗者權限',
      checked: false,
    }, {
      name: '登錄',
      checked: false,
    }, {
      name: '數(shù)據(jù)分析',
      checked: false,
    }, {
      name: '開發(fā)管理',
      checked: false,
    }],
  }
};
// 修改選中狀態(tài)
export default function userPermission(state = initialState, action) {
  switch (action.type) {
    case 'CHANGE_PERMISSION':
      const newData = state.userinfo.permission.map((item, index) =>
        action.index === index ? {
          ...item,
          checked: action.checked
        } : item
      );
      return {
        userinfo: {
          ...state.userinfo,
          permission: newData
        }
      };
    default:
      return state;
  }
}

頁面關鍵代碼

import React from 'react';
import { connect } from 'react-redux';

class AddUser extends React.Component {
  code...
   render() {
    const {
      userinfo,
      handleChange,
    } = this.props;

    return (
      <div className="add_page">
        code...
        {
          // 循環(huán)顯示權限，點擊時調用handleChange，把當前選擇狀態(tài)和索引當做參數(shù)傳遞出去
          userinfo.permission.map((item, index) => (
            <div key={index}>
              <span>{item.name}</span>
              <input type="checkbox" className="adduser_check" name={index} checked={item.checked} onChange={(e) => handleChange(e.target.checked, index)} />
            </div>
          ))
        }
        code...
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    userinfo: state.userinfo,
  };
}

function mapDispatchToProps(dispatch) {
  // 這里偷了點懶，最好應該是調用一個action創(chuàng)建函數(shù)。然后它就去reducer修改狀態(tài)了。
  return {
    handleChange: (checked, index) => dispatch({ type: 'CHANGE_PERMISSION', checked, index }),
  };
}

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

修改姓名也是同樣的邏輯。
還有，樣式一會用class一會用className是什么鬼，只能用className好嘛。

2018年7月15日 16:54