Fatal编程技术网
  • javascript/
  • Javascript 如何在ReactJS中单击按钮时动态显示html内容？

Javascript 如何在ReactJS中单击按钮时动态显示html内容？

javascript html json reactjs

Javascript 如何在ReactJS中单击按钮时动态显示html内容？,javascript,html,json,reactjs,Javascript,Html,Json,Reactjs,我制作了2个按钮和1个输入框，用于显示JSON数据中的日期。当我点击递增或递减按钮时，它应该显示数据。可用的\u插槽[0]。数据\u插槽 如果data.available\u slots[this.state.counter].data\u slots===0则在输入框之外应该显示“今天没有可用的插槽” data.js: const data = { "template_type": "slot_picker", "selection_color": "#0000

我制作了2个按钮和1个输入框，用于显示JSON数据中的日期。当我点击递增或递减按钮时，它应该显示
数据。可用的\u插槽[0]。数据\u插槽

如果
data.available\u slots[this.state.counter].data\u slots===0
则在输入框之外应该显示“今天没有可用的插槽”

data.js:

const data = {
        "template_type": "slot_picker",
        "selection_color": "#000000",
        "secondary_color": "#808080",
        "title": "Available Slots for Dr. Sumit",
        "available_slots": [
          {
            "date": "Wed, Dec 06",
            "date_slots": [

            ]
          },
          {
            "date": "Thu, Dec 07",
            "date_slots": [

            ]
          },
          {
            "date": "Fri, Dec 08",
            "date_slots": [

            ]
          },
          {
            "date": "Sat, Dec 09",
            "date_slots": [

            ]
          },
          {
            "date": "Today",
            "date_slots": [
              {
                "hour": "8",
                "hour_slots": [
                  {
                    "08:10 AM": "slotId001"
                  },
                  {
                    "08:50 AM": "slotId005"
                  }
                ]
              },
              {
                "hour": "3",
                "hour_slots": [
                  {
                    "03:00 PM": "slotId005"
                  },
                  {
                    "03:30 PM": "slotId007"
                  }
                ]
              }
            ]
          },
          {
            "date": "Tomorrow",
            "date_slots": [

            ]
          },
          {
            "date": "Wed, Dec 13",
            "date_slots": [
              {
                "hour": "4",
                "hour_slots": [
                  {
                    "04:30 PM": "slotId105"
                  },
                  {
                    "04:50 PM": "slotId106"
                  }
                ]
              },
              {
                "hour": "5",
                "hour_slots": [
                  {
                    "05:30 PM": "slotId202"
                  },
                  {
                    "05:45 PM": "slotId208"
                  }
                ]
              }
            ]
          }
        ]
      };

 export default data;

import React, { Component } from 'react';
import data from './data';
import './datepicker.css';

class DatePicker extends Component {

  constructor(props){
    super(props);
     this.state = {
        counter:0
     };
   }

  increment(){
    if(this.state.counter < 6){
      this.setState(prevState => ({counter: prevState.counter + 1}))
    }
    if(data.available_slots[this.state.counter].data_slots === 0){
        return(
            <p>No slots available for today</p>
            )
    }else{
        return(
            <p>Slots available for today</p>
            )
    }
  }

  decrement(){
    if(this.state.counter > 0){
      this.setState(prevState => ({counter: prevState.counter-1}))
   }
   if(data.available_slots[this.state.counter].data_slots === 0){
        return(
            <p>No slots available for today</p>
            )
    }else{
        return(
            <p>Slots available for today</p>
            )
    }
  }

  render() {
    return (
      <div>

        <div id="center">
        <div className="title">
            <p>Pick a Date</p>
        </div>
        <div className="increment">
          <button type="button" className="btn btn-success" id="plus" onClick={this.increment.bind(this)}>+</button>
        </div>
        <div className="display">
          <input type="text" id="date" value={data.available_slots[this.state.counter].date}/>
        </div>
        <div className="decrement">
          <button type="button" className="btn btn-danger" id="minus" onClick={this.decrement.bind(this)}>-</button> 
        </div>
        <div className="submit">
          <button type="button" class="btn btn-primary" id="submit">Set Date</button> 
        </div>
      </div>

      <div id="slotinfo">

      </div>


      </div>
    );
  }
}

export default DatePicker;
datepicker.js:

const data = {
        "template_type": "slot_picker",
        "selection_color": "#000000",
        "secondary_color": "#808080",
        "title": "Available Slots for Dr. Sumit",
        "available_slots": [
          {
            "date": "Wed, Dec 06",
            "date_slots": [

            ]
          },
          {
            "date": "Thu, Dec 07",
            "date_slots": [

            ]
          },
          {
            "date": "Fri, Dec 08",
            "date_slots": [

            ]
          },
          {
            "date": "Sat, Dec 09",
            "date_slots": [

            ]
          },
          {
            "date": "Today",
            "date_slots": [
              {
                "hour": "8",
                "hour_slots": [
                  {
                    "08:10 AM": "slotId001"
                  },
                  {
                    "08:50 AM": "slotId005"
                  }
                ]
              },
              {
                "hour": "3",
                "hour_slots": [
                  {
                    "03:00 PM": "slotId005"
                  },
                  {
                    "03:30 PM": "slotId007"
                  }
                ]
              }
            ]
          },
          {
            "date": "Tomorrow",
            "date_slots": [

            ]
          },
          {
            "date": "Wed, Dec 13",
            "date_slots": [
              {
                "hour": "4",
                "hour_slots": [
                  {
                    "04:30 PM": "slotId105"
                  },
                  {
                    "04:50 PM": "slotId106"
                  }
                ]
              },
              {
                "hour": "5",
                "hour_slots": [
                  {
                    "05:30 PM": "slotId202"
                  },
                  {
                    "05:45 PM": "slotId208"
                  }
                ]
              }
            ]
          }
        ]
      };

 export default data;

import React, { Component } from 'react';
import data from './data';
import './datepicker.css';

class DatePicker extends Component {

  constructor(props){
    super(props);
     this.state = {
        counter:0
     };
   }

  increment(){
    if(this.state.counter < 6){
      this.setState(prevState => ({counter: prevState.counter + 1}))
    }
    if(data.available_slots[this.state.counter].data_slots === 0){
        return(
            <p>No slots available for today</p>
            )
    }else{
        return(
            <p>Slots available for today</p>
            )
    }
  }

  decrement(){
    if(this.state.counter > 0){
      this.setState(prevState => ({counter: prevState.counter-1}))
   }
   if(data.available_slots[this.state.counter].data_slots === 0){
        return(
            <p>No slots available for today</p>
            )
    }else{
        return(
            <p>Slots available for today</p>
            )
    }
  }

  render() {
    return (
      <div>

        <div id="center">
        <div className="title">
            <p>Pick a Date</p>
        </div>
        <div className="increment">
          <button type="button" className="btn btn-success" id="plus" onClick={this.increment.bind(this)}>+</button>
        </div>
        <div className="display">
          <input type="text" id="date" value={data.available_slots[this.state.counter].date}/>
        </div>
        <div className="decrement">
          <button type="button" className="btn btn-danger" id="minus" onClick={this.decrement.bind(this)}>-</button> 
        </div>
        <div className="submit">
          <button type="button" class="btn btn-primary" id="submit">Set Date</button> 
        </div>
      </div>

      <div id="slotinfo">

      </div>


      </div>
    );
  }
}

export default DatePicker;

import React，{Component}来自'React'；
从“./data”导入数据；
导入“./datepicker.css”；
类DatePicker扩展组件{
建造师（道具）{
超级（道具）；
此.state={
柜台:0
};
}
增量（）{
if（this.state.counter<6）{
this.setState（prevState=>（{counter:prevState.counter+1}））
}
if（data.available\u slots[this.state.counter].data\u slots==0）{
返回(
今天没有空位

)
}否则{
返回(
今天有空位

)
}
}
减量{
如果（this.state.counter>0）{
this.setState（prevState=>（{counter:prevState.counter-1}））
}
if（data.available\u slots[this.state.counter].data\u slots==0）{
返回(
今天没有空位

)
}否则{
返回(
今天有空位

)
}
}
render（）{
返回(
选择一个日期

+
- 
设定日期
);
}
}
导出默认日期选择器；
当我点击当天的加号/减号按钮时，它会显示当天是否有可用的插槽。因此，
increment（）
和
decreation（）
函数不会返回输入框之外的
元素

屏幕截图：

const data = {
        "template_type": "slot_picker",
        "selection_color": "#000000",
        "secondary_color": "#808080",
        "title": "Available Slots for Dr. Sumit",
        "available_slots": [
          {
            "date": "Wed, Dec 06",
            "date_slots": [

            ]
          },
          {
            "date": "Thu, Dec 07",
            "date_slots": [

            ]
          },
          {
            "date": "Fri, Dec 08",
            "date_slots": [

            ]
          },
          {
            "date": "Sat, Dec 09",
            "date_slots": [

            ]
          },
          {
            "date": "Today",
            "date_slots": [
              {
                "hour": "8",
                "hour_slots": [
                  {
                    "08:10 AM": "slotId001"
                  },
                  {
                    "08:50 AM": "slotId005"
                  }
                ]
              },
              {
                "hour": "3",
                "hour_slots": [
                  {
                    "03:00 PM": "slotId005"
                  },
                  {
                    "03:30 PM": "slotId007"
                  }
                ]
              }
            ]
          },
          {
            "date": "Tomorrow",
            "date_slots": [

            ]
          },
          {
            "date": "Wed, Dec 13",
            "date_slots": [
              {
                "hour": "4",
                "hour_slots": [
                  {
                    "04:30 PM": "slotId105"
                  },
                  {
                    "04:50 PM": "slotId106"
                  }
                ]
              },
              {
                "hour": "5",
                "hour_slots": [
                  {
                    "05:30 PM": "slotId202"
                  },
                  {
                    "05:45 PM": "slotId208"
                  }
                ]
              }
            ]
          }
        ]
      };

 export default data;

import React, { Component } from 'react';
import data from './data';
import './datepicker.css';

class DatePicker extends Component {

  constructor(props){
    super(props);
     this.state = {
        counter:0
     };
   }

  increment(){
    if(this.state.counter < 6){
      this.setState(prevState => ({counter: prevState.counter + 1}))
    }
    if(data.available_slots[this.state.counter].data_slots === 0){
        return(
            <p>No slots available for today</p>
            )
    }else{
        return(
            <p>Slots available for today</p>
            )
    }
  }

  decrement(){
    if(this.state.counter > 0){
      this.setState(prevState => ({counter: prevState.counter-1}))
   }
   if(data.available_slots[this.state.counter].data_slots === 0){
        return(
            <p>No slots available for today</p>
            )
    }else{
        return(
            <p>Slots available for today</p>
            )
    }
  }

  render() {
    return (
      <div>

        <div id="center">
        <div className="title">
            <p>Pick a Date</p>
        </div>
        <div className="increment">
          <button type="button" className="btn btn-success" id="plus" onClick={this.increment.bind(this)}>+</button>
        </div>
        <div className="display">
          <input type="text" id="date" value={data.available_slots[this.state.counter].date}/>
        </div>
        <div className="decrement">
          <button type="button" className="btn btn-danger" id="minus" onClick={this.decrement.bind(this)}>-</button> 
        </div>
        <div className="submit">
          <button type="button" class="btn btn-primary" id="submit">Set Date</button> 
        </div>
      </div>

      <div id="slotinfo">

      </div>


      </div>
    );
  }
}

export default DatePicker;


递增
和
递减
函数只是返回
元素，不知道在哪里显示它们

根据状态变量
this.state.counter
移动逻辑，在
render
函数中呈现“今天没有可用插槽”或“今天可用插槽”。可以删除
递增
和
递减
方法中的逻辑


increment(){
  if(this.state.counter < 6){
    this.setState(prevState => ({counter: prevState.counter + 1}))
  }
}

decrement(){
  if(this.state.counter > 0){
    this.setState(prevState => ({counter: prevState.counter - 1}))
  }
}



increment（）{
if（this.state.counter<6）{
this.setState（prevState=>（{counter:prevState.counter+1}））
}
}
减量{
如果（this.state.counter>0）{
this.setState（prevState=>（{counter:prevState.counter-1}））
}
}


在渲染函数中


<div id="slotinfo">
  { data.available_slots[this.state.counter].date_slots.length === 0 ? 
      <p>No slots available for today</p> : <p>Slots available for today</p> }
</div>




{data.available_slots[this.state.counter].date_slots.length==0？
今天没有可用的插槽
：今天可用的插槽
}

递增
和
递减
函数只是返回
元素，不知道在哪里显示它们

根据状态变量
this.state.counter
移动逻辑，在
render
函数中呈现“今天没有可用插槽”或“今天可用插槽”。可以删除
递增
和
递减
方法中的逻辑


increment(){
  if(this.state.counter < 6){
    this.setState(prevState => ({counter: prevState.counter + 1}))
  }
}

decrement(){
  if(this.state.counter > 0){
    this.setState(prevState => ({counter: prevState.counter - 1}))
  }
}



increment（）{
if（this.state.counter<6）{
this.setState（prevState=>（{counter:prevState.counter+1}））
}
}
减量{
如果（this.state.counter>0）{
this.setState（prevState=>（{counter:prevState.counter-1}））
}
}


在渲染函数中


<div id="slotinfo">
  { data.available_slots[this.state.counter].date_slots.length === 0 ? 
      <p>No slots available for today</p> : <p>Slots available for today</p> }
</div>




{data.available_slots[this.state.counter].date_slots.length==0？
今天没有可用的插槽
：今天可用的插槽
}

它不工作单击加号/减号按钮后显示所有天可用的插槽仅显示今天可用的插槽，即使我单击加号/减号按钮检查此屏幕截图->认为您的意思是条件为
数据\u插槽。长度===0
因为
数据\u插槽是一个数组。是的，您理解我的问题，但仍然出错看起来像是打字错误<代码>日期槽
，而不是
数据槽
。您可以通过在
render
函数中（在
return
语句上方）记录
data.available\u slots[this.state.counter].data\u slots
的值来检查这一点。这将返回
未定义的
。它不起作用。单击加号/减号按钮时，它显示所有天可用的插槽。即使我单击加号/减号按钮，也只显示今天可用的插槽。检查此屏幕截图->认为您的意思是
数据插槽。长度===0
因为
数据插槽
是一个数组。是的你已经理解我的问题，但仍然会出错，看起来像是打字错误<代码>日期槽
，而不是
数据槽
。您可以通过在
render
函数中（在
return
语句上方）记录
data.available\u slots[this.state.counter].data\u slots
的值来检查这一点。这将返回
未定义的
。