[英]How to display html content dynamically when clicking a button in ReactJS?
I have made 2 buttons and 1 input box which displays date from JSON data. 我做了2个按钮和1个输入框,它们显示JSON数据中的日期。 When I click on increment or decrement buttons it should display the
data.available_slots[0].data_slots
当我单击增量或减量按钮时,它应该显示
data.available_slots[0].data_slots
If data.available_slots[this.state.counter].data_slots === 0
then it should display "No slot available today" besides input box. 如果
data.available_slots[this.state.counter].data_slots === 0
则除了输入框外,它还应显示“今天没有可用的插槽”。
data.js: 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;
datepicker.js: datepicker.js:
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;
When I click on plus/minus buttons for that day it should display if the slot is available for that day or not. 当我单击当天的加/减按钮时,应该显示该时段是否可用。 So the
increment()
and decrement()
functions are not returning the <p>
elements besides input box. 因此,
increment()
和decrement()
函数除了输入框外不返回<p>
元素。
Screenshot: 截图:
increment
and decrement
functions are just returning the <p>
elements and doesn't know where to display them. increment
和decrement
函数仅返回<p>
元素,并且不知道在何处显示它们。
Move the logic to render "No slots available for today" or "Slots available for today" inside the render
function based on the state variable this.state.counter
. 根据状态变量
this.state.counter
移动逻辑以在render
函数内render
“今天没有可用的插槽”或“今天没有可用的插槽”。 The logic inside increment
and decrement
methods can be removed. 内部
increment
和decrement
方法中的逻辑可以删除。
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}))
}
}
And in the render function, 在渲染功能中
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.