Есть ли причина, по которой вы используете селекторы DOM javascript для своего компонента, а не для этого в компоненте React?Эта функциональность может быть реализована непосредственно в компоненте React, если вы не знакомы.Здесь вы берете существующий код и добавляете selectedIndex в состояние, чтобы вы могли установить его в состояние и иметь соответствующий элемент с добавленным классом модификатора ...
export default class Search extends Component {
constructor(props) {
super(props);
this.state = {
fetching: false,
filteredSearch: [],
onInput: false,
searchInputValue: '',
searchResults: [],
searchService: new ContextualSearchService(),
selectedIndex: null,
selectedValue: null,
};
this.handleSearch = this.handleSearch.bind(this);
this.sendSearch = this.sendSearch.bind(this);
this.selectSuggestion = this.selectSuggestion.bind(this);
this.handleFocus = this.handleFocus.bind(this);
this.handleBlur = this.handleBlur.bind(this);
this.handleKeyDown = this.handleKeyDown.bind(this);
this.handleArrow = this.handleArrow.bind(this);
}
handleSearch(e) {
this.setState({
searchInput: e.target.value,
fetching: true,
});
}
handleFocus() {
this.setState({onInput: true});
}
handleKeyDown(e) {
const {selectedIndex, selectedValue} = this.state;
const {keyCode} = e;
if (keyCode === 38 || keyCode === 40) {
this.handleArrow(keyCode);
}
this.handleFocus();
if (e.key === 'Enter' && this.state.searchInput !== '') {
if (selectedIndex > 0) {
this.setState({searchInput: selectedValue}, () => {
this.sendSearch();
this.handleBlur();
});
} else {
this.sendSearch();
this.handleBlur();
}
}
}
handleArrow(keyCode) {
const {selectedIndex, filteredSearch} = this.state;
const filteredSearchLength = filteredSearch.length;
let newSelectedIndex;
if (keyCode === 38) {
newSelectedIndex = (this.state.selectedIndex === 0)
? filteredSearchLength - 1
: selectedIndex - 1;
} else {
newSelectedIndex = (selectedIndex + 1 === filteredSearchLength)
? 0
: selectedIndex + 1;
}
this.setState({selectedIndex: newSelectedIndex});
}
handleBlur() {
setTimeout(() => {
this.setState({onInput: false});
}, 100);
}
sendSearch() {
this.state.searchService.getSearch(this.state.searchInput)
.then((res)=>{
this.setState({
searchResults: res,
fetching: false,
});
});
}
selectSuggestion(term, i) {
this.setState({
searchInput: term,
selectedIndex: i,
}, () => {
this.sendSearch();
});
}
render() {
const activeInput = this.state.onInput;
const term = this.state.searchInput;
if (this.state.fetching && term !== '') {
this.state.searchService.getSuggestions(term)
.then((res) => {
this.setState({
filteredSearch: res,
fetching: false,
});
});
}
return (
<div>
<div className="search-row">
<div className="search-wrapper container">
<div className="search">
<input type="text"
className="search__input"
value={this.state.searchInput}
onChange={this.handleSearch}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
onKeyDown={this.handleKeyDown}
placeholder="Buscar..."/>
{
(term !== '' && activeInput &&
this.state.filteredSearch.length > 0) &&
<div className="search__dropdown">
{
this.state.filteredSearch.map((obj, i) => {
// Or you could use that classnames library I suggested here
const className = (i === this.state.selectedIndex)
? 'search__dropdown-option'
: 'search__dropdown-option search__dropdown-option--selected';
return (
<div key={i}
onClick={() => this.selectSuggestion(obj, i)}
className={className}>{obj}
</div>
);
})
}
</div>
}
</div>
<button className="btn btn-search" onClick={this.sendSearch}>
<svg xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16
5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59
4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5
11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z">
</path>
</svg>
</button>
</div>
</div>
{
this.state.searchResults.length > 0 &&
<Results results={this.state.searchResults}></Results>
}
</div>
);
}
}
Однако я бы порекомендовал разбить ваш компонент такЭто не долго, и добавление нового компонента, такого как этот, например, для ваших опций выпадающего списка ...
import React, {Component} from 'react';
import classnames from 'classnames';
class DropDownOptions extends Component {
getClass() {
return classnames({
'dropdown-option': true,
'drowndown-option--selected': this.props.selected
});
}
handleClick() {
this.props.onClick(this.props.value, this.props.selectedIndex)
}
render() {
return (
<div className={this.getClass()} onClick={this.handleClick}>{this.props.children}</div>
);
}
}
classnames - это модуль узла для изменения классов в элементах, но вы можете создать свою собственную функциональность там, какЯ сделал в коде, который я модифицировал.
И последнее, что вы спросили о тестировании в исходном вопросе, вот небольшой пример того, как вы можете проверить это с помощью шутки.Я настоятельно рекомендую ознакомиться с некоторыми документами на шутку, а также проверить энзим.
import Search from '../Search';
describe('Search', () => {
it('should render', () => {
const wrapper = shallow(<Search />);
expect(wrapper).toMatchSnapshot();
});
it('should set selected dropdown', () => {
const wrapper = shallow(<Search />);
const wrapperInstance = wrapper.instance();
wrapper.setState({
filteredSearch: ['a', 'b', 'c'],
selectedIndex: 0,
});
expect(wrapper).toMatchSnapshot();
wrapperInstance.handleArrow(38);
expect(wrapperInstance.state.selectedIndex).toBe(2);
wrapperInstance.handleArrow(40);
expect(wrapperInstance.state.selectedIndex).toBe(0)
});
});