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

Question

在我的搜索栏应用程序中，我使用 Input.Search Ant Design 组件。
例如像这样：

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;

这样当loading属性是true输入字段被禁用时，但按钮仍然可以点击。
我想禁用控件的两个部分，字段和按钮，而loadingprop 是true，有什么办法吗？

Answer 1

你可以在你的searchHandler：

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

编辑：

看起来您可以提供自己的自定义 enterButton。所以我会为回车按钮创建一个新组件并将其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;

您可以使用loading道具禁用按钮并向其添加一个.disabled类。

.disabled { opacity: 0.5; }