Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.05.2017, 18:18
Новичок на форуме
Отправить личное сообщение для romanchenko.alex Посмотреть профиль Найти все сообщения от romanchenko.alex
 
Регистрация: 27.05.2017
Сообщений: 1

Проблема в React JS или array.filter();
Всем привет! У меня такая проблема - разбираю react JS и пол дня лажу по сети в поиске проблемы , не могу понять.



var contacts = [
{
id:1,
club:"Locomotiv",
phone:"Velcom"
},
{
id:2,
club:"CSKA Moskow",
phone:"MTC"
},
{
id:3,
club:"Krilya Sovetov",
phone:"Velcom"
}
];
class List extends React.Component{
constructor(props){
super(props);

this.state = { returnContacts:contacts};
console.log(this.state);
console.log(contacts);

}

malfunc(event){

console.log(event);
var input_val = event.target.value;
console.log(input_val);
var ret = contacts.filter(function(el){
console.log(el);
var club_arr = el.club;
console.log(club_arr);

var res = club_arr.indexOf(input_val) !== -1;
console.log(res);
return res;

});
console.log(ret);
this.setState({returnContacts:ret});
}


render(){
return (
<div>
<input type='text' onChange={this.malfunc}/>

<ul>
{

this.state.returnContacts.map(function (el) {
return <li>{el.club}</li>
})
}

</ul>
</div>
);
}
};
ReactDOM.render(
<List />,
document.getElementById('main')
);




Вот код . есть список ,который выводится из contacts. Я пытаюсь сделать ,чтобы при вводе в текстовое поле буквы список перерисовывался такой, где эти буквы встречаются. В методе filter все обрабатываетс нормально , но в переменную ret все равно записывается underfined и ругается что setState не может обработать underfined. Не могу понять почему . Помогите пожалуйста с проблемкой
Ответить с цитированием
  #2 (permalink)  
Старый 01.10.2017, 19:05
Интересующийся
Отправить личное сообщение для artemdemo Посмотреть профиль Найти все сообщения от artemdemo
 
Регистрация: 07.11.2014
Сообщений: 11

Проблема в том, что ты передаешь функцию в "onChange" без привязки к классу:
onChange={this.malfunc}

Это не правильно, нужно вот так:
onChange={this.malfunc.bind(this)}


Вот рабочий код:

https://jsbin.com/kofareh/6/edit?html,js,output
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Стоит ли изучать нативный js? Или JQuery проще? EmperioAf Оффтопик 37 07.06.2017 00:16
Нужен фронтенд разработчик со знанием React JS удаленно на проект sergeda Работа 0 13.11.2015 18:40
Научить работать с WebDAV (на Apache) на PHP или JS eugen35 Работа 0 30.07.2014 10:01
Работа с датой на JS или jQuery Bond Общие вопросы Javascript 2 17.06.2013 19:40
Найти проблему с jQuery или писать js? Saladdin Элементы интерфейса 0 17.03.2011 17:02