[英]How to render button onClick function in reactjs using react-markdown
[英]How to render functions onclick submit button in ReactJs?
當我點擊提交按鈕時,應該從 JSON 數據中顯示hour_slots
和hour
,但是當我點擊提交按鈕時,什么也沒有顯示。 我正在嘗試使用showslots()
函數在提交按鈕下方顯示 HTML 內容。
數據選擇器.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}))
}
}
decrement(){
if(this.state.counter > 0){
this.setState(prevState => ({counter: prevState.counter-1}))
}
}
showslots(){
if(data.available_slots[this.state.counter].date_slots.length === 0){
return(
<p>No slots</p>
)
}else {
return(
data.available_slots[this.state.counter].data_slots.map(obj =>{
<div id="slotinfo">
<p>Hour : {obj.hour}</p>
<p>Hour slots : {obj.hour_slots[0]}</p>
<p>Hour slots : {obj.hour_slots[0]}</p>
</div>
})
)
}
}
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="status">
{ data.available_slots[this.state.counter].date_slots.length === 0 ?
<p>No slots available for today</p> : <p>Slots available for today</p> }
</div>
<div className="submit">
<button type="button" className="btn btn-primary" id="submit" onClick={this.showslots.bind(this)}>Book Slot</button>
</div>
</div>
</div>
);
}
}
export default 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;
當我點擊提交按鈕時,它應該顯示插槽詳細信息,但提交按鈕下方不顯示任何內容,因為提交按鈕下方沒有動態生成 html。 看截圖:
我在以下代碼中發現了一個主要錯誤
data.available_slots[this.state.counter].data_slots.map(obj =>{
<div id="slotinfo">
<p>Hour : {obj.hour}</p>
<p>Hour slots : {obj.hour_slots[0]}</p>
<p>Hour slots : {obj.hour_slots[0]}</p>
</div>
})
在 map 函數內部,您傳遞了一個不返回任何內容的函數。 對於相同的語法,正確的代碼是:
data.available_slots[this.state.counter].data_slots.map(obj =>{
return (
<div id="slotinfo">
<p>Hour : {obj.hour}</p>
<p>Hour slots : {obj.hour_slots[0]}</p>
<p>Hour slots : {obj.hour_slots[0]}</p>
</div>
);
})
請注意退貨聲明。
如果您不想使用 return 語句,只需將函數定義周圍的大括號替換為圓括號即可。
您需要有一個額外的狀態變量isSubmitted
,最初設置為false
以了解是否已單擊提交按鈕。 單擊提交按鈕時,調用函數將isSubmitted
的狀態值更新為true
。
setSubmitted(){
this.setState({ isSubmitted:true })
}
並將按鈕的onClick
函數更改為setSubmitted
。
<button type="button" className="btn btn-primary" id="submit" onClick={this.setSubmitted.bind(this)}>Book Slot</button>
並在應顯示的任何位置調用showslots()
(連同條件,以便僅在單擊提交按鈕后才顯示插槽),在渲染方法中,如下所示:
{this.state.isSubmitted && this.showslots()}
日期選擇器.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,
issubmitted:false
};
}
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}))
}
}
formsubmitted(){
this.setState({
issubmitted:true
})
}
showslots(){
if(data.available_slots[this.state.counter].date_slots.length === 0){
return(
<p>No slots</p>
)
}else {
return(
data.available_slots[this.state.counter].date_slots.map(obj =>{
return (
<div id="slotinfo">
<p>Hour : {obj.hour}</p>
<p>Hour slots : {obj.hour_slots[0]}</p>
<p>Hour slots : {obj.hour_slots[0]}</p>
</div>
);
})
)
}
}
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="status">
{ data.available_slots[this.state.counter].date_slots.length === 0 ?
<p>No slots available for today</p> : <p>Slots available for today</p> }
</div>
<div className="submit">
<button type="button" className="btn btn-primary" id="submit" onClick={this.formsubmitted.bind(this)}>Book Slot</button>
</div>
</div>
<div>
{this.state.issubmitted ? this.showslots() : <p>No slots</p>}
</div>
</div>
);
}
}
export default DatePicker;
@water-man ,你能測試一下下面的代碼嗎:
import React, {Component} from 'react';
import data from './data.js';
class DatePicker extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0,
data: data
};
this.showslots = this.showslots.bind(this);
}
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}))
}
}
showslots() {
const counter = this.state.counter;
if (this.state.data.available_slots[counter].date_slots.length === 0) {
return (
<p>No slots</p>
)
} else {
const counter = this.state.counter;
const data_slots = this.state.data.available_slots[counter].date_slots;
return (
data_slots.map(obj => {
return(
<div id="slotinfo">
<p>Hour : {obj.hour}</p>
<p>Hour slots : {obj.hour_slots[0]}</p>
<p>Hour slots : {obj.hour_slots[0]}</p>
</div>
)
})
)
}
}
render() {
console.log(data);
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="status">
{ data.available_slots[this.state.counter].date_slots.length === 0 ?
<p>No slots available for today</p> : <p>Slots available for today</p> }
</div>
<div className="submit">
<button type="button" className="btn btn-primary" id="submit" onClick={this.showslots}>Book Slot</button>
</div>
</div>
</div>
);
}
}
export default DatePicker;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.