如何使用react将对话框中的数据发送回父容器?

2024-04-03

我有一个反应大日历 http://intljusticemission.github.io/react-big-calendar/examples/index.html(父容器),我还有一个选择,根据此选择(医生姓名)获取日历的事件,并且当我单击它时有一个按钮,将出现对话框(另一个组件),在这个对话框中,我有一个表单可以在选择后添加事件,当我发布 API 时,我将其保存在本地存储上,但是在刷新页面并重新选择医生姓名后,添加的事件不会出现在我的日历上。 但我希望,当我单击“保存”按钮时,将直接添加到日历上并将其显示在日历上。

我的代码calendar is :

   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>
);
}}

我的代码dialog is :

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>
);
}}

我想刷新我的活动列表,并在弹出窗口上发布表单后而不是在刷新页面后在日历上显示我添加的活动,我将重新选择医生。

我该如何解决它?


我认为,你可以使用这样的代码来实现它:

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>
  }
}

Note:您始终可以尝试获取您的内容localStorage直接从ComponentB(也许使用 ComponentDidUpdate???)但我向您展示的方式更好。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用react将对话框中的数据发送回父容器? 的相关文章

  • 处理kendo调度程序中的销毁事件

    我正在使用剑道调度程序 调度程序网格中添加了事件 当鼠标悬停在每个事件上时 右上角会出现一个小 x 即该事件的销毁事件 单击该事件时会显示一条警告消息 您确定要删除此事件吗 如果单击 是 它将继续并删除该事件 这是我的要求 正如您在上面看到
  • 使用 Formik 反应验证最大范围

    我正在尝试使用 React 和 Formik 进行验证 我想要实现最大数字仅为 2 最大范围应仅为 12 expiryMonth yup string required Select month max 2 Invalid month fo
  • JQuery/CSS:div叠加并且不影响其他div的位置

    如何使div覆盖其他div 例如 dropdownlist 而不影响其他div位置 I ve a hidden将鼠标悬停在 a 上时出现的 div HoverMe div 将其取消悬停 它会再次隐藏 但是当悬停时 该 div 会移动其他 d
  • PUT Ajax 请求

    我是 Ajax 请求的新手 并整理了以下内容Pastie http pastie org 3394114 第 107 行是我的 PUT 并在 firebug 中抛出一个错误 表明 PUT 不起作用 至于ajax请求 我知道这是错误的 但是我
  • 如何在javascript函数中获取Table的所有td值

    我有一个数据表 其中显示子行展开折叠功能 它运行良好 但我想获取表的最后一个 td 的内容 现在我创建了一个函数 该函数在数据表中放置一些硬编码值扩大的地方 在那个地方我想得到那些 td 值 这是我发布的代码
  • 如何在第一个选项卡验证完成后启用第二个选项卡

    我有包含以下字段的选项卡 div ul li a href tabs 1 Tab1 a li li a href tabs 2 Tab2 a li li a href tabs 3 Tab3 a li li a href tabs 4 Ta
  • 在 Fabric.js 中真正旋转等边三角形的中心

    使用 Fabric js 我无法真正围绕其中心点旋转三角形 或者至少我认为应该是中心点 我创建了一个jsFiddle http jsfiddle net UW8Be 这表明 三角形很简单 我用了originX center 原点Y 也是如此
  • jQuery 每个都返回 [object Object]

    我的问题是 html 变量返回如下所示的内容 object Object object Object object Object object Object object Object 而不是元素 我应该做什么不同的事情 var html
  • Javascript对象:迭代属性[重复]

    这个问题在这里已经有答案了 我有一个变量 当打印到控制台时 它看起来像这样 Object PK 34 PK 35 我向该变量添加一个 size 方法 Model value size function obj var size 0 key
  • 我无法添加或删除课程

    我正在尝试删除一个类并在一个函数中添加一个类 但是当我点击按钮时什么也没有发生 这是我的代码 function unlikeVerhaal unlike unlike preventDefault document querySelecto
  • 如何保护应用程序免受第 3 方 js 库中存在的 XSS 向量的影响?

    我在 Android 移动应用程序中使用各种第 3 方库 如 cordova js jquery jquery mobile mobilizer 等 通过不安全地使用 eval settimeout inner outerhtml 这些库被
  • Feathers Js限制对服务器端页面的访问

    我正在使用feathers js 并试图限制已登录的用户对 payment info html 页面的访问 const app feathers app configure configuration path join dirname a
  • 在Javascript中,添加数组时如何避免NaN

    我正在尝试在 javascript 中添加两个数组的值 例如 1 2 1 3 2 3 4 答案应该是 4 4 4 4 但如果我将第一个数组长度更改为 4 我要么得到 4 4 4 要么得到 4 4 4 NaN 我知道第 4 个数字需要位于第一
  • Nestjs Apollo graphql上传标量

    我正在使用 Nestjs graphql 框架 我想使用 apollo 标量上传 我已经能够在另一个不包含 Nestjs 的项目中使用标量 schema graphql App module ts注册graphql GraphQLModul
  • 如何测试子组件是否已渲染?

    在酶中 您可以检查子组件是否存在 如下所示 expect wrapper find ChildComponent toHaveLength 1 React 测试库中的这个测试相当于什么 我找到的所有在线示例都只涵盖了寻找 dom 元素的非常
  • React.js - 在表单提交时和之后显示一条消息

    提交表单时 我想显示 请稍候 并在成功提交后显示从服务器返回的数据 使用 jQuery 这很容易做到 但应该有一种 React 方式 因为 React 不喜欢这种直接的 DOM 操作 我认为 1 我对吗 2 如何在表单提交时 而不是之后 显
  • ASP.net:ClientScript.RegisterClientScriptBlock 在加载 jQuery 之前触发

    我最近查看的一些继承代码中出现了有趣的问题 我正在尝试向项目添加压缩模块 它加载所有 JS 和 CSS 文件 组合它们 缩小它们 并压缩它们 我尝试了多种解决方案 但它们都有一个致命的问题 我有一些 javascript 通过 Master
  • Javascript 字符串到 int 的转换

    我在页面中嵌入了以下 JS var round Math round var id this attr id var len id length var indexPos len 1 index of the number so that
  • 如何将 CSS 翻译添加到现有翻译中?

    我使用 CSS 翻译将 DIV 元素放置在屏幕上 这工作得很好 除了当稍后位移相同的元素时 原始位移被丢弃 使用 javascript 设置 CSS 起始位置 div style transform translate 800px 400p
  • 如何使用 start 和 endAngle 渲染 svg 圆

    我使用 start 和 endAngle 渲染了 svg 圆 效果很好 但是当我渲染完整的圆 startAngle为70 endAngle为70 时 输出有很大的不同 0 90 180 270除外 我为这段代码做错了什么 function

随机推荐