Как отправить данные из диалога обратно в родительский контейнер с реакцией? - PullRequest
Новая
       32

Как отправить данные из диалога обратно в родительский контейнер с реакцией?

4 голосов
/ 28 мая 2019

У меня есть реагирующий-большой-календарь (родительский контейнер), у меня также есть выбор, события календаря которого выбираются в соответствии с этим выбором (имя доктора), и у меня есть кнопкакогда я нажимаю на него, появляется диалоговое окно (другой компонент), в этом диалоговом окне появляется форма для добавления события после выбора, когда я публикую свой API, я сохраняю его в локальном хранилище, но добавленное событие нене появляется в моем календаре сразу после обновления страницы и повторного выбора имени врача.Но я хочу, чтобы, когда я нажимал на кнопку сохранения, он был добавлен непосредственно в календарь, и он появлялся в календаре.

Мой код calendar : 

   import Popup from './Popup';
export default class Calendar extends Component {
constructor(props){
    super(props);
    this.state = {
      events : [],
      open: false,
}}
componentDidMount = () => {
    fetch(process.env.REACT_APP_API_BACKEND_YET+'get_liste_praticien.php')
      .then(Response => Response.json())
      .then(data => {
        this.setState ({ praticiens : data })
        localStorage.setItem('Liste de praticiens ', JSON.stringify(this.state.praticiens))
    })
}
fetchData = (nom,identifiant_user) => {
    this.setState({
      events: [],
      evtStorage:[],
      prevEvents:[], 
      evtBackend:[]
    })
      fetch(process.env.REACT_APP_API_BACKEND+'get_liste_planning')
        .then(Response => Response.json())
        .then(data => {
          let evts = data.ListeResult;
          for (let i = 0; i < evts.length; i++) {
            evts[i].start = moment(evts[i].start).toDate();
            evts[i].end = moment(evts[i].end).toDate();
           if(evts[i].typeplanning === '0') this.setState({isConges:true})
            this.state.events.push(evts[i])
          }                   
          this.setState({
            evtBackend: evts,
            events:  evts
          })
          localStorage.setItem("Liste de planning de " + nom, JSON.stringify(this.state.events));
        }) 
        const evtCached1 = JSON.parse(localStorage.getItem('Liste récente de planning de ' + nom));
        if(evtCached1 !== null) {
          for (let j = 0; j < evtCached1.length; j++) {
            evtCached1[j].start = moment(evtCached1[j].start).toDate();
            evtCached1[j].end = moment(evtCached1[j].end).toDate();
            if(evtCached1[j].typeplanning === '0') this.setState({isConges:true})
            this.state.events.push(evtCached1[j]);
          } 
          this.setState({
            events:this.state.events,
          });
          localStorage.removeItem("Liste de planning de " + nom);
        }}
// For the select
handlePraticienChange = id_user => {
    this.setState({ 
      openPopupAjout: true,
      id_user: id_user 
    },() => {
      this.state.praticiens.map((praticien)=> {
          if(this.state.id_user === praticien.id_user){
            this.setState ({ nom_user: praticien.nom_user})
           this.fetchData(praticien.nom_user, praticien.identifiant_user);
          }
      })
      }
    );
  }
// for the popup
 ModalAjoutb = (ref) => {
    if (ref) {
      this.ajoutb = ref.handleAjouterb;
    } else {
      this.ajoutb = null;
    }
  }
render() {

    return (
<div>
    <button className="bp3-button bp3-icon-add-to-artifact .bp3-fill" tabIndex="0" onClick={() => this.ajoutb(this.state.id_user, this.state.events)}>Add event</button>
    <Select  onChange={this.handlePraticienChange} value={this.state.id_user}>
        {this.state.praticiens.map((praticien) =>
            <Option key={praticien.id_user} value={praticien.id_user}>{praticien.nom_user}</Option>
        )}
    </Select>
    <DragAndDropCalendar
        selectable
        localizer={localizer}
        events={this.state.events} 
        views={['month','week','day']}
        defaultView="week"
        culture = 'fr'
    />
    <Popup ref={this.ModalAjoutb} id_user={this.state.id_user} events={this.state.events} />
</div>
);
}}

Мой код диалога : 

export default class Popup extends Component {
constructor(props){
    super(props);
    this.state = {
      events : [],
}}
handleAjouterb = (id_user) => {
    this.setState({
      openPopupAjout: true,
      id_user,
    }, () => {
        this.fetchingPopup(this.state.id_user, this.state.identifiant_user, this.state.nom_user)
    });
  }
fetchingPopup = (id_user, identifiant_user, nom_user) =>{
    const praticiensCached = JSON.parse(localStorage.getItem('Liste de praticiens '));
    for (let j = 0; j < praticiensCached.length; j++) {
      if(id_user === praticiensCached[j].id_user){
        identifiant_user = praticiensCached[j].identifiant_user;
        this.setState ({ nom_user: praticiensCached[j].nom_user })
    }
}
handleValider = event => {
    event.preventDefault();
    const praticiensCached = JSON.parse(localStorage.getItem('Liste de praticiens '));
    for (let j = 0; j < praticiensCached.length; j++) {
      if(this.state.id_user === praticiensCached[j].id_user)
        this.state.identifiant_user = praticiensCached[j].identifiant_user;
    }

      const formData = new FormData();

      formData.append('identifiant_user', this.state.identifiant_user);
      formData.append('heuredebut', this.state.tranchesC[0].startC);
      formData.append('heurefin', this.state.tranchesC[0].endC);
      formData.append('libelleconge', this.state.libelle);
      axios({
        method: 'post',
        url: process.env.REACT_APP_API_BACKEND+'add_event_docteur',
        data: formData,
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
        }
      })
      .then(() => {
        fetch(process.env.REACT_APP_API_BACKEND+'get_liste_planning/start='+moment().startOf('isoweek').subtract(14,'days').toJSON()+'&end='+moment().endOf('isoweek').add(2,'months').toJSON()+'&identifiant_user='+this.state.identifiant_user)
          .then(Response => Response.json())
          .then(data => {
            let evts = data.ListeResult;
            for (let i = 0; i < evts.length; i++) {
              evts[i].start = moment(evts[i].start).toDate();
              evts[i].end = moment(evts[i].end).toDate();
              this.state.events.push(evts[i])
            }                   
            this.setState({
              events:  this.state.events
            }, ()=> {
              localStorage.setItem('Liste récente de planning de ' + this.state.nom_user, JSON.stringify(this.state.events));
              localStorage.removeItem("Liste de planning de " + this.state.nom_user);
              localStorage.setItem("Liste de planning de " + this.state.nom_user, JSON.stringify(this.state.events));
            })
          })
       })
}

render() {

    return (
<div>
    <Dialog
        icon="application"
        onClose={this.handleClose}
        title="Organisation des plannings du docteur"
        {...this.state}
        isOpen={this.state.openPopupAjout}>
           <Input id="libelle" style={{ width: '480px' }} value={this.state.libelle} onChange={this.handleInputChange('libelle')}/>       
            <label className="pt-label .modifier"><strong>Date</strong></label>
            <LocaleProvider locale={fr_FR}>
                <RangePicker id="date" name= "date"  locale="fr" placeholder={["Date de début","Date de fin"]} separator="-" onChange={this.handleDateCChange}
                    value={this.state.dateIC} format="DD/MM/YYYY" allowClear={false}/> 
            </LocaleProvider>
            <label className="pt-label .modifier"> <strong>Heure de début</strong></label>
            <Time value={el.startC} onChange={time => this.handleKeyboardStartCChange(i, time)} style={heure} disableUnderline={true} inputComponent={TextMaskCustom}
                    endAdornment={ <InputAdornment position="end" style={{opacity:'0.4'}}> <IconButton   onClick={() => this.openDialogC(i, el.startC, "startC")}><i  style={{fontSize:'18px'}} className="zmdi zmdi-alarm" /></IconButton>  </InputAdornment>}
            />
            <label className="pt-label .modifier"> <strong>Heure de fin</strong></label>
            <Time value={el.endC} onChange={time => this.handleKeyboardEndCChange(i, time)} style={heure} disableUnderline={true} inputComponent={TextMaskCustom}
                    endAdornment={ <InputAdornment position="end" style={{opacity:'0.4'}}> <IconButton  onClick={() => this.openDialogC(i, el.endC, "endC")}><i  style={{fontSize:'18px'}} className="zmdi zmdi-alarm" /></IconButton></InputAdornment> }/>

            <Clock maxWidth="xs" open={this.state.isOpenC} onBackdropClick={this.closeDialogC}>
            <TimePicker  mode="24h" value={this.createDateFromTextValueC(this.state.datePickerValueC)} onChange={this.handleDialogCChange}/>
            <DialogActions> <ButtonOk onClick={this.closeDialogC} color="primary"> Ok </ButtonOk></DialogActions>
            </Clock>
                <AnchorButton style={{display:'inline-block'}} intent={Intent.SUCCESS} onClick={this.handleValider}>Valider</AnchorButton>

</div>
);
}}

Я хочу обновить список своих событий и отобразить мое событие, добавленное в календарь послеотправьте форму во всплывающем окне, а не после обновления страницы, и я повторно выберу врача.

Как я могу это исправить?

Ответы [ 6 ]

3 голосов
/ 28 мая 2019

Я думаю, вы можете достичь этого с помощью кода, подобного следующему: 

export default ComponentA extends Component {
  // set localStorage to bar state value
  // via click or whatever ...
    foo () {
    this.setState({
      bar: localStorage.getItem('bar')
    })
  }

  render () {
    // send the value of state to ComponentB
    return <ComponentB foo={this.state.bar}>
  }
}

В ваш компонент 

export default class ComponentB extends Component {
    render () {
    // display the value of foo prop
    return <div>{this.props.foo}</div>
  }
}

Примечание: Вы всегда можете попытаться получить содержимое вашего localStorage непосредственно из ComponentB (возможно, используя ComponentDidUpdate ???), но способ, которым я показываю вам, лучше.

2 голосов
/ 13 июня 2019

Почему бы вам не использовать контекстную функцию React React Context API

context.js 

export const store = {
  something: 'val',
  setSomeThing : () => {}
};

export const CalContext = React.createContext(
  store // default value
);

pop-up.js 

import {CalContext} from './context';

class Popup extends React.Component {

   updateValue = () => {
     this.context.setSomeThing('new_value');
   }    

   render() {
    let calContext = this.context;

    return (
      <button onClick={this.updateValue} >
        {calContext.something}
      </button>
    );
  }
}

Popup.contextType = CalContext;

export default Popup;

calender.js 

import {CalContext} from './context';
import Popup from './pop-up'

class calender extends React.Component {
   constructor(props) {
      this.state = {
         something : 'value'
      }
   }

  setSomeThing = (newVal) => {
    // actual set something code.
    this.setState({something : newVal});
  }

render() {
let contextVal = { something : this.state.something, setSomeThing : this.setSomeThing }
// The entire state is passed to the provider
return (
  <CalContext.Provider value={contextVal}>
    <Popup />
  </CalContext.Provider>
   );}
}
1 голос
/ 15 июня 2019

Не сохраняйте события в вашем штате в Popup, получайте доступ к событиям напрямую из реквизита.

В вашем Календаре создайте функцию, которая будет обновлять состояние. 

updateEvents = (events, callback = () => {}) => {
  this.setState(
    {
      events
    },
    callback
  );
};

<Popup updateEvents={this.updateEvents} ref={this.ModalAjoutb} id_user={this.state.id_user} events={this.state.events} />

Popup 

export default class Popup extends Component {
  constructor(props) {
    super(props);
  }

  handleAjouterb = id_user => {
    this.setState(
      {
        openPopupAjout: true,
        id_user
      },
      () => {
        this.fetchingPopup(
          this.state.id_user,
          this.state.identifiant_user,
          this.state.nom_user
        );
      }
    );
  };
  fetchingPopup = (id_user, identifiant_user, nom_user) => {
    const praticiensCached = JSON.parse(
      localStorage.getItem('Liste de praticiens ')
    );
    for (let j = 0; j < praticiensCached.length; j++) {
      if (id_user === praticiensCached[j].id_user) {
        identifiant_user = praticiensCached[j].identifiant_user;
        this.setState({ nom_user: praticiensCached[j].nom_user });
      }
    }
    handleValider = event => {
      event.preventDefault();
      const praticiensCached = JSON.parse(
        localStorage.getItem('Liste de praticiens ')
      );
      for (let j = 0; j < praticiensCached.length; j++) {
        if (this.state.id_user === praticiensCached[j].id_user)
          this.state.identifiant_user = praticiensCached[j].identifiant_user;
      }

      const formData = new FormData();

      formData.append('identifiant_user', this.state.identifiant_user);
      formData.append('heuredebut', this.state.tranchesC[0].startC);
      formData.append('heurefin', this.state.tranchesC[0].endC);
      formData.append('libelleconge', this.state.libelle);
      axios({
        method: 'post',
        url: process.env.REACT_APP_API_BACKEND + 'add_event_docteur',
        data: formData,
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json'
        }
      }).then(() => {
        fetch(
          process.env.REACT_APP_API_BACKEND +
            'get_liste_planning/start=' +
            moment()
              .startOf('isoweek')
              .subtract(14, 'days')
              .toJSON() +
            '&end=' +
            moment()
              .endOf('isoweek')
              .add(2, 'months')
              .toJSON() +
            '&identifiant_user=' +
            this.state.identifiant_user
        )
          .then(Response => Response.json())
          .then(data => {
            let evts = data.ListeResult;
            for (let i = 0; i < evts.length; i++) {
              evts[i].start = moment(evts[i].start).toDate();
              evts[i].end = moment(evts[i].end).toDate();
            }
            this.props.updateEvents(evts, () => {
              localStorage.setItem(
                'Liste récente de planning de ' + this.state.nom_user,
                JSON.stringify(evts)
              );
              localStorage.removeItem(
                'Liste de planning de ' + this.state.nom_user
              );
              localStorage.setItem(
                'Liste de planning de ' + this.state.nom_user,
                JSON.stringify(evts)
              );
            });
          });
      });
    };
  };

  render() {
    return (
      <div>
        <Dialog
          icon="application"
          onClose={this.handleClose}
          title="Organisation des plannings du docteur"
          {...this.state}
          isOpen={this.state.openPopupAjout}
        >
          <Input
            id="libelle"
            style={{ width: '480px' }}
            value={this.state.libelle}
            onChange={this.handleInputChange('libelle')}
          />
          <label className="pt-label .modifier">
            <strong>Date</strong>
          </label>
          <LocaleProvider locale={fr_FR}>
            <RangePicker
              id="date"
              name="date"
              locale="fr"
              placeholder={['Date de début', 'Date de fin']}
              separator="-"
              onChange={this.handleDateCChange}
              value={this.state.dateIC}
              format="DD/MM/YYYY"
              allowClear={false}
            />
          </LocaleProvider>
          <label className="pt-label .modifier">
            {' '}
            <strong>Heure de début</strong>
          </label>
          <Time
            value={el.startC}
            onChange={time => this.handleKeyboardStartCChange(i, time)}
            style={heure}
            disableUnderline={true}
            inputComponent={TextMaskCustom}
            endAdornment={
              <InputAdornment position="end" style={{ opacity: '0.4' }}>
                {' '}
                <IconButton
                  onClick={() => this.openDialogC(i, el.startC, 'startC')}
                >
                  <i style={{ fontSize: '18px' }} className="zmdi zmdi-alarm" />
                </IconButton>{' '}
              </InputAdornment>
            }
          />
          <label className="pt-label .modifier">
            {' '}
            <strong>Heure de fin</strong>
          </label>
          <Time
            value={el.endC}
            onChange={time => this.handleKeyboardEndCChange(i, time)}
            style={heure}
            disableUnderline={true}
            inputComponent={TextMaskCustom}
            endAdornment={
              <InputAdornment position="end" style={{ opacity: '0.4' }}>
                {' '}
                <IconButton
                  onClick={() => this.openDialogC(i, el.endC, 'endC')}
                >
                  <i style={{ fontSize: '18px' }} className="zmdi zmdi-alarm" />
                </IconButton>
              </InputAdornment>
            }
          />
          <Clock
            maxWidth="xs"
            open={this.state.isOpenC}
            onBackdropClick={this.closeDialogC}
          >
            <TimePicker
              mode="24h"
              value={this.createDateFromTextValueC(this.state.datePickerValueC)}
              onChange={this.handleDialogCChange}
            />
            <DialogActions>
              {' '}
              <ButtonOk onClick={this.closeDialogC} color="primary">
                {' '}
                Ok{' '}
              </ButtonOk>
            </DialogActions>
          </Clock>
          <AnchorButton
            style={{ display: 'inline-block' }}
            intent={Intent.SUCCESS}
            onClick={this.handleValider}
          >
            Valider
          </AnchorButton>
      </div>
    );
  }
}
1 голос
/ 15 июня 2019

В вашем родительском компоненте, т.е. <Calendar/>, вы можете определить метод, скажем, 

HandleNewDataFromPopup(data) {
   this.setState({newData: data})
}

и передать этот метод в качестве опоры в компоненте Popup 

<Popup HandleNewDataFromPopup={this.HandleNewDataFromPopup}/>

и вВаш <Popup/> компонент в методе handleValider при успешном завершении вызова извлечения вы можете вызвать метод HandleNewDataFromPopup (this.props.HandleNewDataFromPopup), чтобы заполнить данные в родительском компоненте 

handleValider() {
  // on axios success
  this.props.HandleNewDataFromPopup(data)
}

Это отвечает на ваш вопрос?

1 голос
/ 14 июня 2019

Вы можете использовать React Context API или Redux.

Но если вы не хотите этого, вы можете использовать опору, которая является методом в вашем дочернем компоненте, чтобы родитель мог захватить событие. Похоже Выходная механика из Angular 2+.

Вот пример: 

const ChildComponent = (onSelect = () => {}) => {
  return <div onClick={() => onSelect('You selected me')}>Child Component</div>
}

const ParentComponent = () => {
  return <ChildComponent onSelect={message => console.log(message)} /> // You selected me
}
1 голос
/ 29 мая 2019

Вы ищете что-то вроде этого 

class ComponentB extends React.Component{
  render(){
    this.props.setInLocalStorage();
    const value = localStorage.getItem("testA");
    return <div>
  This is componentB{value}
  </div>}
}
class ComponentA extends React.Component{
 setInLocalStorage = ()=>{
   localStorage.setItem('testA', 'Hello');
}
render(){
  return <ComponentB setInLocalStorage={this.setInLocalStorage}/>
}
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...