Невозможно изменить состояние дочернего компонента даже после передачи функции из родительского компонента - PullRequest
Новая
       7

Невозможно изменить состояние дочернего компонента даже после передачи функции из родительского компонента

0 голосов
/ 13 февраля 2020

В настоящее время создается приложение, которое сначала имеет экран приветствия, но при нажатии кнопки ввода оно устанавливает для состояния приветствия значение от true до false. запуск фактического компонента списка задач.

По какой-то причине даже после передачи функции в WelcomePage React все равно не будет отображаться для другого компонента при нажатии клавиши ввода.

Спасибо, 

function Router(props) {
    if (props.welcome) {
        return <WelcomePage onEnter={props.onEnter}/> //if home is true, there will be home page rendered
    } else { 
        return <ToDoPage/> //if home is false, that means you've entered
    }
}


class ToDo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {welcome: true};
        this.onEnter = this.onEnter.bind(this);
    }

    onEnter(e) {
        this.setState({welcome: false});
    }

    render() {
        return (
                <div className="ToDo">
                    <Router welcome={this.state.welcome} onEnter={this.onEnter}/>
                </div>
            )
    }
}

class WelcomePage extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div id="home">
                <h1> Welcome</h1>
                <h2> Who does this list beong to? </h2>
                <input placeholder="your name"/>
                <input type="button" value="enter" onSubmit={this.props.onEnter}/>
            </div>
            )
    }
}

1 Ответ

1 голос
/ 13 февраля 2020

Попробуйте изменить onSubmit на onClick, так как input:button не генерирует submit событий: 

class WelcomePage extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div id="home">
                <h1> Welcome</h1>
                <h2> Who does this list beong to? </h2>
                <input placeholder="your name"/>
                <input type="button" value="enter" onClick={this.props.onEnter}/>
            </div>
            )
    }
}
...