javascript - 传递给功能组件的 Prop 会自动更改吗?

标签 javascript reactjs functional-programming bootstrap-4 frontend

我正在做一个实验项目,当我遇到这个奇怪的事情时,我正在尝试使用 javascript,我无法解释它的行为。我正在将 bootstrap 4 与 CDN 结合使用。 SandboxCode

import React from 'react';

const Button = props => {
  const showProps = e => {
    e.preventDefault();
    console.log(props.day, props.slot);
  };

  return (
    <div>
      <div data-toggle="modal" data-target="#myModal">
        Click Me!
      </div>

      <div className="modal fade" id="myModal">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h4 className="modal-title">Add / Edit Slot</h4>
              <button type="button" className="close" data-dismiss="modal">
                &times;
              </button>
            </div>

            <div className="modal-body">
              <form>
                <div className="form-group">
                  <label>
                    <h6>Faculty</h6>
                  </label>
                </div>
                <div className="form-group">
                  <label>
                    <h6>Venue</h6>
                  </label>
                </div>
                <div className="form-group">
                  <label>
                    <h6>Subject</h6>
                  </label>
                </div>
                <button
                  type="submit"
                  className="btn btn-success btn-cons btn-block"
                  onClick={showProps}
                >
                  Save
                </button>
              </form>
            </div>

            <div className="modal-footer">
              <button
                type="button"
                className="btn btn-danger btn-block"
                data-dismiss="modal"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Button;

此组件提供了一个按钮,当在模态中单击“保存”按钮时,该按钮会打开一个模态,然后它会控制两个属性(day 和 slot)。

它的父组件是主组件,然后在要渲染的 App.js 文件中使用。

import React, { Component } from "react";
import Button from "./Button/Button";

export default class Main extends Component {
  render() {
    return ["Monday", "Tuesday"].map((day, dayIndex) => {
      return [0, 1].map((slot, slotIndex) => {
        return (
          <Button key={dayIndex + "-" + slotIndex} day={day} slot={slotIndex} />
        );
      });
    });
  }
}

异常(exception)结果:- 单击按钮并单击模式中的保存按钮后,每个按钮应根据 Prop 控制台不同的数据。

输出:- 所有保存按钮单击都会输出相同的内容。 我已经被困在这个问题上两天了,我已经尝试了很多东西。

最佳答案

这是一个 id 问题:)。看下面的代码:

<div data-toggle="modal" data-target="#myModal">

使每个模态的 id 都是唯一的,否则无论您单击哪个按钮,它都会为它找到的具有给定 id 的第一个元素调出模态。

请参阅此 sandbox 中的固定代码,基本上改变了这两行以确保唯一的模态 id:

<div data-toggle="modal" data-target={`#myModal_${props.day}_${props.slot}`}>

还有

<div className="modal fade" id={`myModal_${props.day}_${props.slot}`}>

关于javascript - 传递给功能组件的 Prop 会自动更改吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52112342/

相关文章:

javascript - 在 firebase 中给定 id 之后获取更多数据

javascript - 如何使用 Firefox Android 插件的 Websocket

javascript - "location"是 react 中的保留字吗?如果是这样,它有什么作用?

f# - 在 F# 中对一系列相等的字符进行切片/分组

scala - 返回会破坏引用透明度吗?

programming-languages - 部分评估和柯里化(Currying)

JavaScript 下载链接

javascript - 如何使用静态方法将身份验证 token 传递给 API 类

javascript - 如何在 React 字符串中添加换行符?

Javascript,如何从json数组接收数据