Как передать в функцию в качестве аргуменка State в ReactJS?

Question

[Ninja Mate]

Как в реакте правильно передать стейт в функцию, а потом сделать this.setState?

//Хочу сделать универсально для разных стейтов и для _count задавать какой именно стейт.
    counter(cond, _count){
        if(cond==true) this.setState({ _count:  _count+1})
    }

                <h1>{this.state.count}</h1>

                <Button onClick={()=> this.counter(true, this.state.count) }> +++ </Button>

Comments

[Максим]

мне кажется, вы изобретаете какой-то велосипед. Приведите пример поподробнее.

[Ninja Mate]

Максим: мне нужно следующее. в проекте есть пнели с чекбоксами и при нажатии таких чекбоксов должен меняться счетчик (нажали +, еще раз -), хочу сделать метод в котором буду передавать true/false и название стейта который изменить. Можно через if/case прогонять, можно к каждому отдельно задать onChange... но это как то громоздко выглядит. Проблема в том что я описал возникает когда нужно указать this.setState _count: и это тот стейт что я передаю в функцию, а не просто _count из элемента

[Евгений Подивилов]

Ninja Mate: Можно передавать стейт строкой и обращаться к нему в функции counter как this.state[_count]+1. А строку можно биндить при инициализации каждого чекбокса.

[Ninja Mate]

Barlad: кажется это то что нужно. сейчас попробую.

Answer 1

[Евгений Подивилов]

Например можно написать функцию так:

counter(cond, stateField){
	if(cond==true) {
		const newState = {};
		newState[stateField] = this.state[stateField] + 1;
		this.setState(newState);
	}
}

А биндить эту функцию к кнопке так:

<Button onClick={ this.counter.bind(this, true, someStateField }> +++ </Button>

Comments

[Ninja Mate]

Не получается

constructor(...props) {
        super(...props);
        this.state = {
eng_oneoff_patwaitappoint:false,
OneOffPSCount:0,
 }
counter(cond,  stateField){
 const newState = {};
 if(cond==true) {
//подскажите что в newState происходит
     newState[stateField] = this.state[stateField] + 1;
     this.setState(newState);
 } else {
     newState[stateField] = this.state[stateField] - 1;
     this.setState(newState);
 }
    }

    render() {

        return (
{this.state.OneOffPSCount} 

       <Input type="checkbox" checked={this.state.eng_oneoff_patwaitappoint} label="Patient waiting for Appointment"
                onChange={ ()=>{
                                            this.setState({ eng_oneoff_patwaitappoint: !this.state.eng_oneoff_patwaitappoint });
                                            this.counter.bind(this, this.state.eng_oneoff_patwaitappoint,' eng_oneoff_patwaitappoint'); }} />

[Евгений Подивилов]

Ninja Mate: newState - просто для создания нового состояния.
Что-то у вас тут напутано со скобками. У вас реально такой код или вы просто скопировали не удачно?

Вот мой код:

export class CheckBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            eng_oneoff_patwaitappoint: false,
            OneOffPSCount: 0
        }
    }
    counter(cond,  stateField){
        const newState = {};
        if(cond === true) {
            newState[stateField] = this.state[stateField] + 1;
            this.setState(newState);
        } else {
            newState[stateField] = this.state[stateField] - 1;
            this.setState(newState);
        }
    }

    render() {
        return (
            <input type="checkbox" checked={this.state.eng_oneoff_patwaitappoint} label="Patient waiting for Appointment" onChange={this.counter.bind(this, !this.state.eng_oneoff_patwaitappoint,'eng_oneoff_patwaitappoint')} />
        )
    }
}

Другой вопрос - зачем вам OneOffPSCount? Зачем делать +1 и -1? Не проще ли брать состояние true/false? Кароч не не совсем понимаю ваше решение =)

[Ninja Mate]

Barlad: не стреляйте ) копирую как могу) OneOffPSCount это для юзера счетчик который он видит. Кажется разобрался. Бинд не правильно работает. 5 минут попробую в реальный проект закинуть.

[Евгений Подивилов]

Ninja Mate: Ок, но по поводу eng_oneoff_patwaitappoint. У вас сначало false, а потом 0 или 1. Я бы предложил следующий вариант изменения стейта для чекбокса:

export class CheckBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            firstCheckBox: false,
            secondCheckBox: false
        }
    }
    counter(stateField){
        const newState = {};
        newState[stateField] = !(this.state[stateField]);
        this.setState(newState);
    }

    render() {
        return (<div>
            <input type="checkbox" checked={this.state.firstCheckBox} label="First checkbox" onChange={this.counter.bind(this, 'firstCheckBox')} />
            <input type="checkbox" checked={this.state.secondCheckBox} label="Second checkbox" onChange={this.counter.bind(this, 'secondCheckBox')} />
            </div>)
    }
}

А изменение OneOffPSCount просто добавить отдельно как вам требуется

[Ninja Mate]

{this.state.OneOffPSCount}
onChange={ ()=> {
                  this.counter( !this.state.eng_oneoff_eldwelc, 'OneOffPSCount' );
                  this.setState({ eng_oneoff_eldwelc: !this.state.eng_oneoff_eldwelc }); }} />

Вот так и работает нормально. Странность в том что если поменять местами counter и setState и пытаться использовать измененный стейт

this.counter( this.state.eng_oneoff_eldwelc, 'OneOffPSCount' );

те false на true уже задали, то заходит в функцию пердыдущий стейт, до изменения... а так все работает. То что я и хотел. Спасибо

[Евгений Подивилов]

Ninja Mate: На будущее: у this.setState есть второй параметр - callback.
Можно сделать так:

this.setState({ eng_oneoff_eldwelc: !this.state.eng_oneoff_eldwelc }, () => {
	this.counter( this.state.eng_oneoff_eldwelc, 'OneOffPSCount' );
})

[Ninja Mate]

Barlad: реально полезно, не знал. вообще странно что я подобный вашему пример нашел только в https://github.com/react-toolbox/react-toolbox/iss..., хотя в php и java подобные задачи возникали постоянно и решались стандартно, а тут прямо танци с бубном на два дня получились. Спасибо еще раз.