@AndreyKiyah

Чекбокс ReactJs проверка?

есть 2 чекбокса с выбором пола ,в option({w: "w", m:"m"} мужчина и женщина), по умалчанию (.this.props.val("w"))-это женщина сравниваеться тип option и val и чек бокс чекается.
при смене пола прилетает новый пропс(.this.props.val2("m")).Как сменить чекбос на чекед?После перезагрузки не меняеться чекбокс.

import React, { Component } from 'react';
import {connect} from 'react-redux';
import {changeValInp} from '../ducks/inputs';

import Toolforminput from './Tool_form_input';

class Reg_form_switch extends Component{
    constructor(props){
        super(props);
    }


    render(){
        const {
            keyel,
            id,
            isRequired,
            options,
            err,
            title,
            viewType,
            val,
            val2,
            tooltip,
            disabled,
            addClass
        } = this.props;
        const handlerSwith = this.handlerUserChange;
        const isDesibled = (disabled === true || disabled === 'true') ? true : false;

        let isChecked = false;
        let fuild = null;
        console.log("options", options);
        console.log("val", val);
        if(Object.keys(options).length > 1){
            fuild = <div key={("fieldSelectCont" + keyel)} className={("profileFuild _flex _flex-wrap _align-center _justify-between" + addClass)}>
                        <span className="profileFuild__label _grow-full">{title}:</span>
                        <div className="profileFuild_swithWrap _shrink-null _flex _flex-wrap _align-center">
                            {
                                Object.keys(options).map(function (el, idx) {
                                    return <div className="_flex _justify-center _align-center">
                                                <input disabled={isDesibled} id={("fieldSwithLab" + keyel + idx)} type="radio" key={("fieldSwithRadio" + keyel + idx)} value={el} checked={el === val} onChange={handlerSwith} className="fieldWrap_swith__inp"/>
                                                <label key={("fieldSwithLab" + keyel + idx)} htmlFor={("fieldSwithLab" + keyel + idx)} className={(el === val)?'fieldWrap_swith__lab _flex _justify-center _align-center active' : 'fieldWrap_swith__lab _flex _justify-center _align-center'}>
                                                    {options[el]}
                                                </label>
                                            </div>
                                })
                            }
                            <span key={("fieldErr" + keyel)} className="fieldWrap__error">{err}</span>
                            <Toolforminput key={("fieldTool" + keyel)} tooltip={tooltip}/>
                        </div>
                    </div>;
        }else{
            fuild = <div key={("fieldSwithCheckWrap" + keyel)} className={("profileFuild _flex _flex-wrap _align-center _justify-between" + addClass)}>
                        <input onChange={this.handlerUserChange} defaultChecked={val} key={("fieldSwithCheckInp" + keyel)} type="checkbox" id={("fieldSwithCheckInp" + keyel)} className="saveMe__check" />
                        <label key={("fieldSwithCheckLab" + keyel)} htmlFor={("fieldSwithCheckInp" + keyel)} className="saveMe__lab _flex _align-center">{title}:</label>
                        <span key={("fieldErr" + keyel)} className="profileFuild__error">{err}</span>
                        <Toolforminput key={("fieldTool" + keyel)} tooltip={tooltip}/>
                    </div>;
        }


        return(
            fuild
        )
    }

    handlerUserChange = (e) => {
        const {changeValInp, id, val, options} = this.props;
        if(Object.keys(options).length > 1) {
            changeValInp(id, e.target.value);
        }else{
            const newVal = (val) ? false : true;
            changeValInp(id, newVal);
        }
    }
}

export default connect(null, {changeValInp})(Reg_form_switch);
  • Вопрос задан
  • 81 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы