Javascript 如何使用onclick事件将属性放入react组件中

我有一个来自ant.design的组件：

这里我想要的是，我想在单击组件后在组件内部添加“loading”属性。加载属性将保留5秒钟，然后将从组件中删除

这里是它的编码端

单击之前：

<Search 
   placeholder="Customer Id"
   id="CustomerID"
   inputProps={{ "aria-label": "Customer Id" }}
   onChange={onChange}
></Search>

<Search 
   placeholder="Customer Id"
   id="CustomerID"
   inputProps={{ "aria-label": "Customer Id" }}
   onChange={onChange}
   loading
></Search>

点击后：

<Search 
   placeholder="Customer Id"
   id="CustomerID"
   inputProps={{ "aria-label": "Customer Id" }}
   onChange={onChange}
></Search>

<Search 
   placeholder="Customer Id"
   id="CustomerID"
   inputProps={{ "aria-label": "Customer Id" }}
   onChange={onChange}
   loading
></Search>

---

提前谢谢。

它不是那样工作的。您可以尝试将其保持在状态，然后将其作为道具传递给组件。编写一个事件处理程序来处理按钮的onClick事件（或您正在使用的任何事件），并根据您的要求切换布尔值。

我在index.js中做了一些更改。复制并添加它将起作用。如果您希望看到加载程序onClick搜索栏使用onChange或onClick而不是onSelect

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Input } from "antd";

const { Search } = Input;
const App = () => {
  const [firstLoader, setFirstLoader] = useState(false);
  return (
    <>
      <Search
        placeholder="input search loading default"
        onSearch={() => {
          setFirstLoader(true);
          setTimeout(() => {
            setFirstLoader(false);
          }, 5000);
        }}
        loading={firstLoader}
      />
      <br />
      <br />
      <Search
        placeholder="input search loading with enterButton"
        loading
        enterButton
      />
    </>
  );
};
ReactDOM.render(<App />, document.getElementById("container"));

import React，{useState}来自“React”；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“/index.css”；
从“antd”导入{Input}；
const{Search}=输入；
常量应用=（）=>{
const[firstLoader，setFirstLoader]=useState（false）；
返回(
{
setFirstLoader（真）；
设置超时（（）=>{
setFirstLoader（假）；
}, 5000);
}}
加载={firstLoader}
/>




);
};
render（，document.getElementById（“容器”）；

通常不会这样做，您可以使用加载属性

load={loadingState}

并单击，您可以处理loadingState值true或false。