Reactjs 如何禁用Ant Design Input.Search组件中的按钮

在我的搜索栏应用程序中，我使用Input.search Ant设计组件。
例如：

import React from 'react';
import { Input } from 'antd';

const SearchBar = ( { loading, searchHandler } ) => (
  <Input.Search placeholder="Enter name to search here"
                disabled={loading}
                onSearch={searchHandler}
                enterButton='Search' />          
);

export default SearchBar;

从“React”导入React；
从“antd”导入{Input}；
const SearchBar=（{loading，searchHandler}）=>(
);
导出默认搜索栏；

当

加载

属性为

true

时，这种方式会禁用输入字段，但按钮仍然可以单击

---

我想禁用控件的两个部分，字段和按钮，而

加载

道具是

真的

，有什么方法可以做到吗

您可以在

searchHandler

中处理它：

searchHandler = e => {
  if(this.state.loading) {
    e.preventDefault();
    return false;
  }else {
    // Do stuff..
  }
}

编辑：

看起来你可以。因此，我将为enter按钮创建一个新组件，并将其作为道具传递给

loading

：

const EnterButton = ({ loading, onClick }) => (
    <button className={loading ? 'disabled' : ''} onClick={onClick} disabled={loading}>Search</button>
);

export default EnterButton;

...

import React from 'react';
import { Input } from 'antd';
import EnterButton from './EnterButton';

const SearchBar = ( { loading, searchHandler } ) => (
    <Input.Search placeholder="Enter name to search here"
                  disabled={loading}
                  onSearch={searchHandler}
                  enterButton={<EnterButton loading={loading} onClick={searchHandler} />} />
);

export default SearchBar;

---

非常感谢你，你的回答对我很有帮助，但我发现你用错误的方式回答了我的问题。我更感兴趣的是使按钮在视觉上不起作用。@timur啊，好的，更新了我的答案，展示了如何做到这一点。

.disabled { opacity: 0.5; }