Я создаю код автозаполнения страны в React JS.
Идея состоит в том, что всякий раз, когда используются типы в строке поиска, происходит событие onInput.Затем он отфильтрует страны, проверив входные данные по элементам массива, т.е. по всем странам.
Когда я console.log () отфильтрованный массив, я получаю точный результат, который я ищу, но проблема в том,Я хочу создать дочерний элемент <div></div> и добавить его к родительскому элементу.
Но код, который я использую для отображения дочернего элемента, не работает.Я пытался использовать appendChild (), но это тоже не работает.
Вот мой код для родительского компонента.
import React from 'react';
import SearchLocationBarItem from './SearchLocationBarItem';
class SearchLocationBar extends React.Component {
countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central Arfrican Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cuba","Curacao","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Kosovo","Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauro","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","North Korea","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Korea","South Sudan","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Vanuatu","Vatican City","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];
selectedCountries = [];
handleOnInput = (e) => {
let element = undefined;
this.selectedCountries = this.countries.filter((country) => {
if(country.startsWith(e.target.value)){
React.render(<SearchLocationBarItem item={country} />, document.getElementById('autocomplete'));
}
});
};
render() {
return (
<form autoComplete="off" method="post">
<div id="custom-search-input">
<div className="input-group ">
<input
type="text"
className=" search-query"
placeholder="Your Address or postal code"
onInput={this.handleOnInput}
/>
<div id="autocomplete" className="autocomplete-items">
</div>
<span className="input-group-btn">
<input type="submit" className="btn_search" value="submit" />
</span>
</div>
</div>
</form>
);
}
}
export default SearchLocationBar;
И код для дочернего компонента.
import React from 'react';
export default (props) => {
return (
<div>{props.item}</div>
);
}
Я пытался пройти через React doc и google, но мне не удалось получить ответ.