Как установить antd input.search только для чтения при onSearch

Question

Я пытаюсь отключить или, что еще лучше, сделать содержимое моего компонента input.search недоступным для редактирования после того, как пользователь нажмет на поиск. Однако использование свойства disabled для достижения этого также отключает кнопку «поиск», и мне нужно только отключить само поле ввода. Есть ли способ достичь этого легко?

<Input.Search
enterButton={inProgress ? 'Cancel' : 'Search'}
onSearch={text => this.go(text)}
allowClear={inProgress ? false : true}
disabled={inProgress ? false : true}
/>

Answer 1

Я обнаружил, что это простой способ сделать input поле readOnly

const MyInput = () => {
  const [readOnly, setReadOnly] = useState(false);
  return (
    <div>
      <Search
        placeholder="input search text"
        enterButton="Search"
        size="large"
        readOnly={readOnly}
        onSearch={value => {
          console.log(value);
          setReadOnly(!readOnly);
        }}
      />
    </div>
  );
};

оформить заказ Демо