Как кнопку setState в элементе, который будет менять стейт в элементе уровнем выше?

Question

Ninja Mate @victorzadorozhnyy

Как кнопку setState в элементе, который будет менять стейт в элементе уровнем выше?

Есть вот такое приложение

import { UserFirstForm } from './UserFirstForm'; Здесь декларировать передачу стейта?
import { UserHome } from './UserHome'; 
import....

class GridView extends Component {
    constructor(...args) {
        super(...args);
        this.state = {
            form: <UserFirstForm/> или Здесь декларировать передачу стейта?
        };
    }
    render() {
        return (
            <div>
                     {this.state.form}
                     <Button  onClick={() => this.setState({ form: <NewPatient/> })} ></Button>
            </div>
        );
    }
}

export class App extends Component {
    render() {
        return (
            <GridView/>
        );
    }
}

В данном случае кнопка менает стейт в своем родительском элементе, а хочу сделать <UserFirstForm/> <UserFirstForm /> и прочие, что бы они меняли стейт в родительском. Как должно мыглядеть декларирование параметра, что бы стейт принимал значение children?

export class UserHome extends Component {
    constructor(...args) {
        super(...args);
        this.state = {
             Как задекларировать стейт? :  что то принимает за значение....
        };
    }

    render() {
        return (
            <div>
                <ButtonGroup justified>
                    <Button onClick={????} >Patient<br/>Service</Button>
                    <Button onClick={????} >Non-patient<br/>Service</Button>
                    <Button onClick={????} >Engagement</Button>
                </ButtonGroup>
            </div>
        );
    }
}

Вопрос задан более трёх лет назад
2521 просмотр

Комментировать

Подписаться 2 Оценить Комментировать

Пригласить эксперта

Ответы на вопрос 2

10 комментариев

Ninja Mate @victorzadorozhnyy Автор вопроса
А как правильно передать ? Метод вот такой с передачей из родительского
class GridView extends Component { constructor(...args) { super(...args); this.state = { form: <UserHome {...this.props}/> }; this.change = this.change.bind(this) } changeView(){ this.setState({ form: <NewPatient /> }) } ...{this.state.form}

А в элементе как правильно задекларировать?onClick={changeView()}
Написано более трёх лет назад
Aves @Aves

Не думаю, что state подходящее место для компонентов, там лучше сделать простой объект.
changeView должен его менять.
В render
А уже в UserFirstForm в render в элементах onClick={this.props.change}

Написано более трёх лет назад
Aves @Aves

*В render <UserFirstForm change={this.changeView}/>

Написано более трёх лет назад

Ninja Mate @victorzadorozhnyy Автор вопроса

Aves:

class GridView extends Component {
    constructor(...args) {
        super(...args);
        this.state = {
            form: <UserHome change={this.changeView}/>
        };
        this.change = this.change.bind(this)
    }


    changeView() {
        this.setState({form: <NewPatient />})
    }

    change(){
        this.setState({ open: !this.state.open })
    }
    render() {
        return (
                            {this.state.form }

и в самом элементе выдает ошибку

TypeError: Cannot read property 'setState' of null

может нужно как то this указать или еще что то?

Написано более трёх лет назад

Ninja Mate @victorzadorozhnyy Автор вопроса

Aves: в элементе <Button onClick={this.props.change}

Написано более трёх лет назад
Aves @Aves

Ninja Mate: React по идее сам всё биндит. Думаю, стоит попробовать компонент из консруктора врендер перенести.

Написано более трёх лет назад
Ninja Mate @victorzadorozhnyy Автор вопроса

Aves: Как же тогда задать начальный стейт? У меня первый элемент появляется с кнопками, которые должны потом убраться и другие страницы показать на месте {this.state.form } где они и появились.

Написано более трёх лет назад

Ninja Mate @victorzadorozhnyy Автор вопроса

Aves: а вот так даже не работает с родительского элемента кнопка...

class GridView extends Component {
    constructor(...args) {
        super(...args);
        this.state = {
           form: ''//<UserHome {...this.props} change={this.changeView}/>
        };
        //this.change = this.change.bind(this)
        //this.changeView = this.changeView.bind(this)
    }



    render() {

        var changeView= () => this.setState({form: <NewPatient />});

        this.state = {
            form: <UserHome change={changeView}/>
        };

        return (
                            {this.state.form}
<Button onClick={changeView}/>

Написано более трёх лет назад

Aves @Aves

Я сейчас с телефона, сложно код писать, условно так/

class Form extends Component {
  constructor() {
    this.state = { step: 0 }
  }
  change() { this.setState({ step: 1 }) }
  render() {
    return this.state.step === 0 ? <One change={this.change} /> : <Two />
  }
}

Написано более трёх лет назад

Ninja Mate @victorzadorozhnyy Автор вопроса

Aves: если можно подробнее немного, я вам на почту написал с примером кода

Написано более трёх лет назад