reactjs - 如何禁用 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输入字段被禁用，但按钮仍然可以点击。
我想禁用控件的两个部分，字段和按钮，而 loading Prop 是 true ，有什么办法吗？

Answer 1

您可以在您的 searchHandler 中处理它:

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

编辑:

看起来可以 supply your own custom enterButton .所以我会为回车按钮创建一个新组件并传递它 loading作为 Prop :

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 prop 禁用按钮并添加 .disabled类到它。

.disabled { opacity: 0.5; }