如何在 ReactJs 中呈现函数 onclick 提交按钮？答案

【问题标题】：How to render functions onclick submit button in ReactJs?如何在 ReactJs 中呈现函数 onclick 提交按钮？
【发布时间】：2018-08-04 10:23:42
【问题描述】：

当我点击提交按钮时，应该会显示来自 JSON 数据的 hour_slots 和 hour，但是当我点击提交按钮时，什么都不会显示。我正在尝试利用 showslots() 函数在提交按钮下方显示 HTML 内容。

datapicker.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;

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;

当我点击提交按钮时，它应该显示槽详细信息，但提交按钮下方没有显示任何内容，因为提交按钮下方没有动态生成 html。看截图：

【问题讨论】：

你应该像下面这样调用函数：onClick={this.showslots}
@salman.zare 进行了这些更改，但仍然无效

标签： javascript html json reactjs

【解决方案1】：

您需要有一个额外的状态变量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()}

【讨论】：

我应该在上面的答案检查中进行哪些更改。
正如 KapilDev Neupane 所指出的，您错过了退货声明。否则看起来很好。你看到任何错误吗？此外，将来，如果您需要澄清答案，请使用代码更新问题并在您已更新问题的答案上留下评论。不要发布为新答案。
还注意到一个错字 - date_slots，而不是 data_slots。
如果插槽可用，我没有获得 HTML 内容，为什么会这样？查看快照 -> imgur.com/a/HTxoB 对于没有插槽，它会正确显示，但对于可用的插槽，它应该显示内容
您在showslots() 函数的else 部分的map 中错过了一个return 语句。检查 KapilDev Neupane 的答案 - stackoverflow.com/a/48963722/1421222

【解决方案2】：

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,
        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;

【讨论】：

【解决方案3】：

我在以下代码中发现了一个重大错误

                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 语句，只需将函数定义周围的大括号替换为圆括号即可。

【讨论】：

@Kapli 为什么当插槽可用时它不显示内容它只显示没有插槽

【解决方案4】：

@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;

【讨论】：

谢谢萨尔曼，但我已经解决了。我要在您的回答中提及，因为您使用的是map()，我们需要将每个<p> 保留在一个新的<div> 标记中。