Как перезаписать пропс?

Question

[AndreyKiyah]

Как перезаписать пропс ?
например у нас есть пропс который являеться дефолтный по умолчанию this.props.val = 5, так же есть 2 пропс например this.props.val2 = null.
в jsx есть сравнение, например если el === val , если эдентичен то true(все ок),но когда перезаписуется this.pros val2 то сравнивать его с el?

Answer 1

[Филипп Гапоненко]

el === (val2 || val)

Comments

[Филипп Гапоненко]

Нужно больше подробностей.
Приведи код компонента, плз.

[AndreyKiyah]

Филипп Гапоненко,
Где знаки вопроса не знаю что писать,
вобщем в пропсе есть val и curVal, val это дефолтный чек который равен w(woman), при изменении curVal меняется с null на m(man) и чекбокс нужно проверить теперь на curVal что бы чекнуть.

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,
            tooltip,
            disabled,
            addClass,
            curVal
        } = this.props;
        const handlerSwith = this.handlerUserChange;
        const isDesibled = (disabled === true || disabled === 'true') ? true : false;

        let isChecked = false;
        let fuild = null;
        console.log('def value',val);
        console.log('current value',curVal);
        console.log('this props',this.props);
        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={ ???? }   onChange={handlerSwith} className="fieldWrap_swith__inp"/>
                                                <label key={("fieldSwithLab" + keyel + idx)} htmlFor={("fieldSwithLab" + keyel + idx)} className={(el === curVal)?'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);

[Филипп Гапоненко]

checked={ (curVal || val) }

Но вообще, конечно, лучше передавать одно значение в пропсах, а логику определения дефолтное/кастомное вынести на уровень выше.

[AndreyKiyah]

Филипп Гапоненко, не подходит , так как в еl ключи w и m , так как curVal будет тру то и в некоректный вернет тру