1

Есть основной компонент App

class App extends Component {
  сonstructor(props) {
  this.state = {
    AuthVisible: true,
  }
 }
render() {
    return (
      <div className="App container-fluid">

      <div className="row">
        <div className="col-lg-4"><Logo /></div>
        <div className="col-lg-4"></div>
        <div className="col-lg-4"><Region /></div>
      </div>

      <Nav />

       <div className="row">
        <div className="col-lg-3"><Auth /></div>
        <div className="col-lg-6"><GlobalSearch /></div>
        <div className="col-lg-3"><MasterRightBanner /></div>
      </div>
</div>
    );
  }
}

Есть Компонент Auth, который импортирован в App

class Auth extends Component {  

  constructor(props) {
    super(props);
    this.state = {
      visible: true,
      email: '',
      password: ''

    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }


  handleChange(event) {
    var tar = event.target.name;
    var val = event.target.value;
    this.setState({[tar]: val});


      }


  handleSubmit(event) {
    event.preventDefault();
    this.setState({visible: false})
    alert('email : ' + this.state.email + "\\n" + 'password : ' + this.state.password);

  }

  render() {                            
    return (
      <div>
      <div className="authForm">ЛИЧНЫЙ КАБИНЕТ</div>
      <Form onSubmit = {this.handleSubmit} onChange= {this.handleChange} />
      </div>
    );
  }
}

Каким образом родительский компонент App может узнать, что в чилдрене Auth была нажата кнопка авторизации, и заменить этот компонент чем то другим? Например привет userName. Вопрос глобальный, не только по этой форме. Интересует решение без Redux.

1
  • Если вам дан исчерпывающий ответ, отметьте его как принятый ^_^ 6 сен 2018 в 18:22

1 ответ 1

3
  1. В App объявить колбек:

    onSubmited = () => {
    }
    
  2. Прокинуть в Auth:

     <div className="col-lg-3" onSubmited={this.onSubmited}><Auth /></div>
    
  3. В Auth он будет в props. Поэтому в handleSubmit можете его вызвать:

    handleSubmit(event) {
        event.preventDefault();
        this.setState({visible: false})
        alert('email : ' + this.state.email + "\\n" + 'password : ' +         this.state.password);
        if(this.props.onSubmited)
            this.props.onSubmited();
    }
    
  4. В onSubmited вашего App что-нить делаете. Можете здесь поменять state. А на основании этого стейта в render выводить нужный компонент.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.