Search code examples
javascriptreactjsant-design-pro

Disabled Search.Input button and.design

I need to disable button in Search component. Disable it if the input is empty and if email is not valid. I could not find a solution to make that happen, if anyone did that before please kindly assist. The enter Button just shows the button on true or false but there is no property that disables is.

 <Search
   value={this.state.email}
   style={{width: '450px', marginTop: '20px',}}
   placeholder={t('emailPlaceHolder')}
   enterButton={t('submit')}
   onSearch={this.handleSubmitEmail}
   onChange={this.handleEmailChange}
 />

Thank you in advance guys

Solution

  • There is a Property for the Search component, named enterButton, which is either a boolean, or a react component. you can use a simple functional component to replace the button it provides you with and you can pass your props to that button yourself.

    <Search
  enterButton={() => <MyEnterButtonComponent disabled={myEmailValidationFunction} />
/>

    This is the API of the Search Component.