Почему setState не работает в данном случае?

Question

[Ninja Mate]

Не могу заставить функцию change менять state open:

export class UserFirstForm extends Component {

    constructor(...args) {
        super(...args);
        this.state = {
            open: false,
            value: 'select'
        };
    }

    change(){
        console.log("WTF");
        this.in.state({ open: !this.state.open })
    }

    render() {
return (
            <div>

                <form>

                    <Input type="select" value={this.state.value} label="Please select who the Activity is in relation to:" placeholder="Select"
                           onChange={this.change}>
                        <option value="Patient">Patient</option>
                        <option value="Escort">Escort</option>
                        <option value="Carer">Carer</option>
                        <option value="Family">Family Member</option>
                        <option value="Other" >Other</option>
                    </Input>


                    <Button onClick={()=> this.setState({ open: !this.state.open })}>
                        click
                    </Button>

                    <Collapse in={this.state.open} ref="myCol">
                        <div>
                            <Well>
                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad 
                            </Well>
                        </div>
                    </Collapse>

при этом this.setState({ open: !this.state.open })}> работает и в change() все заходит

Comments

[Lynn «Кофеман»]

https://facebook.github.io/react/docs/reusable-com...

[Ninja Mate]

Алексей Тен: Cannot read property 'setState' of undefined это я первое что сделал. Думаю дело в constructor(...args) он как то по другому задает стейты...

[Ninja Mate]

Алексей Тен: святая морковка... а ведь получилось... onChange={this.change.bind(this)} сделайте Ответом. отмечу как правильный

[Никита Гущин]

Ninja Mate: это не рекомендуется. При каждом рендере вы заново биндите функцию - это плохо.

Answer 1

[Никита Гущин]

Вы банально теряете указатель на this:
<Input ... onChange={this.change}>

Попробуйте сделать автобинд:

change = () => {
        console.log("WTF");
        this.setState({ open: !this.state.open })
    };

UPD1
Или биндите ее в конструкторе (равносильно методу выше, но это не удобно)

constructor(...args) {
        super(...args);
        this.state = {
            open: false,
            value: 'select'
        };
        this.change = this.change.bind(this)
    }

Comments

[Ninja Mate]

не работает попробовал this.in.state и this.state = Uncaught TypeError: Cannot read property 'state' of undefined

[Ninja Mate]

все же не работает первый вариант, а вот второй UPD1 на ура

[Никита Гущин]

Ninja Mate: хм .. "this.in.state" первый раз вижу. А this.setState должен работать в первом варианте

[Ninja Mate]

Никита Гущин: react-bootstrap не сильно документируют свои копмпоненты, просто есть такой и там setState не фурычит

[Никита Гущин]

Ninja Mate: быть может in - от слова internal. Т.е. какое-нибудь внутреннее свойство. В документации к реакту я не нашел ничего похожего.

[Ninja Mate]

Никита Гущин: скорее всего, ничего в других компонентах бутстрапа нет похожего, остается только гадать. Спасибо за помощь