Блог

Я использую пользовательский интерфейс материала в проекте react.

— У меня есть форма поиска на домашней странице, которая после заполнения и нажатия кнопки отправки — Я хочу открыть новое диалоговое окно с формой и ввести это значение в качестве скрытого входного значения — однако — мое приложение ломается при попытке добавить функции handleOpen / Close. Я пытался связать это, но, похоже, ничего не работает.

Значение поиска вернулось от дочернего элемента — и в submitHandler — но теперь я хочу открыть диалоговое окно и продолжить функциональность в командной строке.

 import React, { Component } from 'react'
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

//import Grid from '@material-ui/core/Grid';


import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';


//search block related modules
import SearchQuote from './SearchQuote/SearchQuote';

import './Search.scss';

class Search extends Component {
    
  constructor(props, context) {
    super(props, context);
    this.state = {open: false};

    this.handleOpen = this.handleOpen.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  submitHandler(data){
    console.log("data now with parent", data);


    if(data){
      //open dialog box

      console.log("this", this);

      this.handleOpen();

    }
  }


  handleOpen() {
    console.log("handleOpen");

    /*
    this.setState({
      open: true
    });*/
  }

  handleClose() {
    console.log("handleClose");

    /*
    this.setState({
     open: false
    });
    */
  }
  
  render() {

    return (
      <div className="search-block">
        
        <SearchQuote submitHandler={this.submitHandler} />


                <Modal
                  aria-labelledby="transition-modal-title"
                  aria-describedby="transition-modal-description"
                  className={'modal'}
                  open={this.state.open}
                  onClose={this.handleClose}
                  closeAfterTransition
                  BackdropComponent={Backdrop}
                  BackdropProps={{
                    timeout: 500,
                  }}
                >
                  <Fade in={this.state.open}>
                    <div className={'modalform'}>

                      xxxxxxxxxxxxxx

                    </div>
                  </Fade>
                </Modal>




      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
  };
}

function mapDispatchToProps(dispatch) {
 return bindActionCreators({  }, dispatch);
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Search))