Всем привет, не могу откопать информацию как можно использовать функции дочерних компонентов из родительского и наоборот.
Например у меня есть компонент CreateTableView и в нем вызывается функция ajax которая подгружает данные и допустим компонент AccessOwers. При изменении каких либо свойств в AccessOwers, мне нужно что бы таблица обновлялась и выполняла функцию ajax компонента CreateTableView/
В данном случае интересует именно какой нибудь рабочий пример взаимодействия, а не обходные решения данной проблемы, т.к в работе с реактом лучше разбивать все на мелкие компоненты, но бывают случаи когда нужно выполнить функцию другого компонента.
Пример из проекта ( но не рабочий, т.к его сильно порезал):
var AccessOwers = React.createClass({
render : function(){
var user = this.props.counterProp;
var content = [];
var counter = 0;
if(user.contractors){
_.each(user.contractors, function(contractors, index){
counter++;
content[index] = <option value = {contractors.id} key = {index}>{contractors.name}</option>;
});
}else{
content[0] = <option value = "0" key = "0">нету</option>;
}
var counterOwers = <span className="badge badgeTable">{counter}</span>;
return(
<td>
<select id = {"selectContractors" + user.id} className='styleForSelect'>
{content}
</select>
{counterOwers}
</td>
);
}
});
var CreateTableView = React.createClass({
componentWillReceiveProps(nextProps) {
this.ajax();
},
ajax : function(){
$.ajax({
dataType : 'json',
url : '/Admin/getDataUsers',
data : {
filter : filter
},
success : function (data) {
}
});
},
render : function(){
return (
<div>
<div class = "table-responsive" >
<table className="table table-bordered">
<thead>
<tr>
<th className={styleEdit}>*</th>
<th>ID</th>
<th>Вкл.</th>
<th>Поставщик</th>
</tr>
</thead>
<tbody>
{this.state.owner.map(function(i, k) {
return <tr key = {k}>
<td className={styleEdit}><a className="glyphicon glyphicon-edit" title = {i.id} onClick={openModalChangeUsers}></a></td>
<AccessOwers counterProp={i}/>
</tr>
})}
</tbody>
</table>
</div>
</div>
);
}
});
ReactDOM.render(
<div>
<CreateTableView />
</div>,
document.getElementById('tableOwnersView')
);