React: как добавить реквизиты для компонента внутри библиотеки?

Question

Поэтому я использую компонент someone else wrote под названием реагировать-поиска следующим образом ...

<div> 
    <Search items={ITEMS} /> 
    </div> 

Это создает <input> внутри <div> внутри <div>. Мне нужно добавить опору onKeyDown={ this.myMethod } на номер <input>. Каков наилучший способ достичь этого? У меня такое чувство, что редактирование кода внутри node_modules не является ответом. Спасибо!

Answer 1

Если библиотека не предоставляет способ передачи реквизита в дочерние элементы своих компонентов, нет другого способа сделать это. Реактивные компоненты немного «непрозрачны» по дизайну, так что вы не можете путешествовать со своим внутренним состоянием и детьми. Поэтому в этом случае вы на самом деле do должны отредактировать код библиотеки, чтобы это учесть.

Однако это не такая пугающая вещь. Просто передайте обработчик событий в компонент библиотеки как опору, а затем в библиотеке найдите, где находится элемент <input>, и передайте ему обработчик событий, как обычно. Мне пришлось редактировать многие библиотеки React аналогичными способами, и это вполне нормально.

Редактировать: На самом деле я должен добавить, что вы можете просто обойти React и добавить обработчик события непосредственно к элементу input, используя простой JavaScript. Например, в функциях родительского компонента библиотеки componentDidMount и componentWillUnmount вы должны добавить и удалить обработчик событий, соответственно, с помощью addEventListener или аналогичного. Однако обычно - плохая идея взломать обходные действия, чтобы использовать собственные функции Реагента, когда вы можете делать то же самое внутри React с немного большей работой. Также довольно сложно точно определить, к какому элементу input вы хотите добавить слушателей.

Answer 2

Библиотека only accepts the onKeyChange prop. Если вы хотите событие onKeyDown, вам придется отредактировать библиотеку самостоятельно или send in a PR to the code base.