есть 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);