如何获取checkbox的状态并传入redux中

Question

我的问题

我想将这个页面的用户名和权限设置的checkbox信息传到redux中。
并在另外页面以列表的形式显示出来。

几个点不懂

1. 如何在redux中获取checkbox的状态
2. 我需要同时将用户名的字符串和多个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>开发者权限</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>数据分析</div>
                                    <div><input class="adduser_check" name="4" type="checkbox" onChange={e => this.onInputChange4(e)}/></div>
                            
                                    <div>开发管理</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>
            )
    }
}

Answer 1

你现在的写法基本上没有用到redux，下面是我改造了一下。
在redux中获取checkbox的状态：就是在点击checkbox的时候，dispatch一个action，传递需要的参数（索引，是否选中），然后在对应的reducer函数中修改状态。修改状态成功后页面上就能拿到最新的状态，你提交、传递数据都可以用这个最新的状态。
reducer部分

// state格式建议写成这样。权限使用一个数组，然后循环出来。
const initialState = {
  userinfo: {
    userName: '',
    permission: [{
      name: '开发者权限',
      checked: true,
    }, {
      name: '体验者权限',
      checked: false,
    }, {
      name: '登录',
      checked: false,
    }, {
      name: '数据分析',
      checked: false,
    }, {
      name: '开发管理',
      checked: false,
    }],
  }
};
// 修改选中状态
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...
        {
          // 循环显示权限，点击时调用handleChange，把当前选择状态和索引当做参数传递出去
          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创建函数。然后它就去reducer修改状态了。
  return {
    handleChange: (checked, index) => dispatch({ type: 'CHANGE_PERMISSION', checked, index }),
  };
}

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

修改姓名也是同样的逻辑。
还有，样式一会用class一会用className是什么鬼，只能用className好嘛。