在关系 Modal 的 onClose 处添加参数

Question

目标：
当您按下名为“yes 1”的按钮时，该值应包含“yes yes”，最后 console.log 应显示“test yes yes”。

当您按下名为“yes 2”的按钮时，该值应包含“no no”，最后 console.log 应显示“test no no”。

值“test yes yes”或“test no no”的显示发生在 index.tsx。
执行或决定发生在 ModalForm.tsx.

问题：
从技术角度来看，试图通过使用此代码 onClick={props.onClose("yes yes")} 找到解决方案，但它不起作用。

如何解决这个问题？

堆栈闪电战：
https://stackblitz.com/edit/react-ts-rpltpq

谢谢！

index.html

<div id="root"></div>

<!-- Latest compiled and minified CSS -->
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

index.tsx

import React, { Component, useState, useEffect } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import { ModalForm } from './ModalForm';

import './style.css';

interface dddd {
  clientid: string | undefined;
  idid: number;
}

const getTest = () => {
  console.log('test');
};

const App = () => {
  const [clientiddd, setClientid] = useState('ddfdf');
  const [idid, setIdid] = useState(0);

  return (
    <div>
      <button
        data-bs-toggle="modal"
        data-bs-target="#myModalll"
        className={'btn btn-outline-dark'}
      >
        {'data'}
      </button>
      <br />
      <ModalForm clientid={clientiddd} onClose={getTest} />
    </div>
  );
};

render(<App />, document.getElementById('root'));

ModalForm.tsx

import React, { Component } from 'react';

interface ModalProps {
  clientid: string | undefined;
  onClose: () => void;
}

export const ModalForm = (props: ModalProps) => {
  return (
    <div
      className="modal"
      id="myModalll"
      data-bs-backdrop="static"
      data-bs-keyboard="false"
      tabIndex={-1}
      aria-labelledby="staticBackdropLabel"
      aria-hidden="true"
    >
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-header">
            <h4 className="modal-title">T</h4>
            <button
              type="button"
              className="btn-close btn-close-black"
              data-bs-dismiss="modal"
              onClick={props.onClose}
            ></button>
          </div>

          <div className="modal-body">
            TITLE:
            <br />
            <button
              type="button"
              data-bs-dismiss="modal"
              onClick={props.onClose}
            >
              yes 1
            </button>
            <button
              type="button"
              data-bs-dismiss="modal"
              onClick={props.onClose}
            >
              yes 2
            </button>
            <br />
          </div>
        </div>
      </div>
    </div>
  );
};

Answer 1

你的问题有点难懂，我试试看。

onClick={props.onClose('yes yes')}

此代码的作用是调用 props.onClick 并将 yes yes 作为参数并将 returned 值分配为 onClick 侦听器。

假设 props.onClose 是这样的：

function onClose() {
  console.log('test')
}

它在这里做的是调用这个函数（它记录 test 到控制台）但是因为这个函数没有 returning 任何东西，它传递 undefined 作为onClick 这里。

如果你的函数是这样的：

function onClose(result) {
  return function () {
    console.log('test', result)
  }
}

现在它会用 yes yes 调用 props.onClose 并且它会 return 一个函数。这个匿名函数将作为 onClick 事件侦听器传递，当您单击时，它会调用它，因此只有在单击后才会记录 test yes yes。

你也可以做不同的事情，保持你的 onClose 功能不变，但引入 result:

function onClose(result) {
  console.log('test', result)
}

但现在你必须传递这个函数而不是调用它:

onClick={() => props.onClose('yes yes')}

如您所见，总会有一个匿名函数在那里的某处，只是该函数在哪里以及何时调用什么的问题。希望这个解释能有所帮助。

Answer 2

https://stackblitz.com/edit/react-ts-nw6upt?file=index.html

index.html

<div id="root"></div>

<!-- Latest compiled and minified CSS -->
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

index.tsx

import React, { Component, useState, useEffect } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import { ModalForm } from './ModalForm';

interface dddd {
  clientid: string | undefined;
  idid: number;
}

const getTest = (result: string) => {
  console.log('testff ' + result);
};

const App = () => {
  const [clientiddd, setClientid] = useState('ddfdf');
  const [idid, setIdid] = useState(0);

  return (
    <div>
      <button
        data-bs-toggle="modal"
        data-bs-target="#myModalll"
        className={'btn btn-outline-dark'}
      >
        {'data'}
      </button>
      <br />
      <ModalForm clientid={clientiddd} onClose={getTest} />
    </div>
  );
};

render(<App />, document.getElementById('root'));

ModalForm.tsx

import React, { Component } from 'react';

interface ModalProps {
  clientid: string | undefined;
  onClose: (result: string) => void;
}

export const ModalForm = (props: ModalProps) => {
  return (
    <div
      className="modal"
      id="myModalll"
      data-bs-backdrop="static"
      data-bs-keyboard="false"
      tabIndex={-1}
      aria-labelledby="staticBackdropLabel"
      aria-hidden="true"
    >
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-header">
            <h4 className="modal-title">T</h4>
            <button
              type="button"
              className="btn-close btn-close-black"
              data-bs-dismiss="modal"
              onClick={() => props.onClose('ccc')}
            ></button>
          </div>

          <div className="modal-body">
            TITLE:
            <br />
            <button
              type="button"
              data-bs-dismiss="modal"
              onClick={() => props.onClose('aaa')}
            >
              yes 1
            </button>
            <button
              type="button"
              data-bs-dismiss="modal"
              onClick={() => props.onClose('bbb')}
            >
              yes 2
            </button>
            <br />
          </div>
        </div>
      </div>
    </div>
  );
};

在关系 Modal 的 onClose 处添加参数

Add parameter at onClose in relation Modal

react-tsx

react-hooks