Есть следующее приложение:
import React from 'react'
import ReactDOM from 'react-dom'
const url="api-url";
class MessageItem extends React.Component {
constructor(props) {
super(props);
this.state = {
value:'',
};
};
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
return (
<div className="message_wrap" key={this.props.message_id}>
<div className="message_body">
{this.props.message_body}
</div>
<div className="input-field col s12">
<textarea value={this.state.value} onChange={this.handleChange.bind(this)}/>
<label htmlFor="textarea1">
Ответ
</label>
<button onClick={this.props.onClick}>
Отправить
</button>
</div>
</div>
);
}
}
class Message extends React.Component {
constructor(props) {
super(props);
this.state = {
mes:[],
};
};
componentDidMount(){
fetch(url).then(function(response){
return response
}).then(function (response) {
return response.json()
}).then((data)=>{
this.setState({mes:data})
})
}
subFunction(user_id, value) {
/*Здесь метод отправляет ответ с телом равным значению textarea */
}
render() {
return (
<div>
{this.state.mes.map((index)=>
(
<MesItem
key={index.message_id}
message_body={index.message_body}
onClick={this.subFunction.bind(this, index.user_id)}
/>
)
)
}
</div>
);
}
}
ReactDOM.render(<Message/>, document.getElementById('container'));
Вкратце: нужно получить список сообщений от некоторого API - это происходит в компоненте Message через fetch по событию componentDidMount. Далее через map рендерится список сообщений через дочерний компонент MessageItem. В нем есть поле для ответа textarea. Значение его находится this.state.value. По факту нужно, чтобы при нажатии на кнопку Отправить можно было через функцию subFunction отослать ответ, передав ей id пользователя и значение ответа в textarea, затем сообщение должно быть удалено из массива mes. Если с передачей id проблем нет, то вот как передать value textarea, который находится в this.state.value MessageItem я не знаю. Получается, если я переношу subFunction в MessageItem, то теряю возможность изменить mes родительского Message(не могу удалить сообщение после ответа), если оставляю как есть - не могу получить значение textarea для ответа
Средний
