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

Question

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

(am|pm|AM|PM)?

这种方式当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 prop是loading，有什么方法可以做到吗？

Answer 1

您可以在searchHandler：

中处理它

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

修改

看起来你可以supply your own custom 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; }