Изучаю React, пытаюсь написать простейшее приложении-блокнот с облачным сохранением заметок. Выглядит оно вот так:
Как видите, там всего два элемента - выпадающий список и поле с текстом.
Проблема в том, что я не понимаю, как прокинуть данные из выпадающего списка в поле для ввода. Пытался сделать вот так:
import React, { Component } from 'react';
import TextEdit from './TextEdit';
class NoteSelect extends Component {
constructor(props) {
super(props);
this.state = {
selected: this.props.notes[0],
notes: this.props.notes
};
this.noteSelect = this.noteSelect.bind(this);
}
noteSelect(event) {
let newState = Object.assign({}, this.state);
let index = event.target.value;
let _selected = this.state.notes[index];
newState.selected = _selected;
this.setState(newState);
}
editForm() {
if (this.state.selected !== null) {
return <TextEdit textObject={this.state.selected} />;
} else {
return (
<article className="message is-info">
<div className="message-body">
Пожалуйста, выберите заметку
</div>
</article>
);
}
}
render() {
return (
<div className="container">
<div style={{margin: 30, marginTop: 15}}>
<div className="field">
<p className="control">
<span className="select is-fullwidth">
<select onChange={this.noteSelect}>
{this.props.notes.map((item, index) =>
<option value={index} key={index}>
{item.text}
</option>
)}
</select>
</span>
</p>
</div>
<div className="field">
{this.editForm()}
</div>
</div>
</div>
);
}
}
export default NoteSelect;
Но текст в компоненте TextEdit не меняется.
Код TextEdit:
import React, { Component } from 'react';
class TextEdit extends Component {
constructor(props) {
super(props);
this.state = {
timer: null,
textObject: this.props.textObject
};
this.handleChange = this.handleChange.bind(this);
//this.setData = this.setData.bind(this);
console.log('created');
}
saveChanges() {
console.log('Save changes');
}
setText(text) {
clearTimeout(this.state.timer);
this.saveChanges();
this.setState({
timer: null,
value: text
});
}
handleChange(event) {
clearTimeout(this.state.timer);
this.setState({
timer: setTimeout(this.saveChanges, 5000),
value: event.target.value
});
}
render() {
return (
<p className="control">
<textarea className="textarea" value={this.state.textObject.text} onChange={this.handleChange} placeholder="Type your text here!" />
</p>
);
}
}
export default TextEdit;