Я пытаюсь создать простой редактор на основе сетки для структуры данных, и у меня возникает пара концептуальных проблем с React.js. Их документация не очень помогает в этом, поэтому я надеюсь, что кто-то здесь может помочь.
Во-первых, каков правильный способ передачи состояния из внешнего компонента во внутренний компонент? Возможно ли иметь изменения состояния во внутреннем компоненте "пузырь" вверх по внешнему компоненту (компонентам)?
Во-вторых, могут ли два отдельных компонента обмениваться данными, так что мутация в одном видима в другом?
Ниже приведен упрощенный пример того, что я хочу сделать (версия JSFiddle):
У меня есть объект company, содержащий массив объектов employee. Я хочу выложить список employee в редактируемой сетке. Когда я нажимаю кнопку, я хочу увидеть результирующий объект company, а также любые мутации (запись на консоль).
/** @jsx React.DOM */
var Cell = React.createClass({
getInitialState: function () {
return {data: ""};
},
componentWillMount: function () {
this.setState({data: this.props.data});
},
onChange: function (evt) {
console.log(this.state, evt.target.value);
this.setState({data: evt.target.value});
},
render: function () {
var data = this.props.data;
return <input value={this.state.data} onChange={this.onChange} />
}
});
var Row = React.createClass({
render: function () {
return (<div className="row">
<Cell data={this.props.data.name} />
<Cell data={this.props.data.location} />
<Cell data={this.props.data.phone} />
</div>);
}
});
var Grid = React.createClass({
render: function () {
var rows = this.props.data.map(function (rowData, index) {
return <Row key={index} data={rowData}>Row</Row>;
});
return <div className="table">{rows}</div>;
}
});
var Button = React.createClass({
getInitialState: function () {
return {data: {}}
},
componentWillMount: function () {
this.setState({data: this.props.data});
},
onClick: function () {
console.log(this.state);
},
render: function () {
return <button onClick={this.onClick}>Update</button>;
}
});
var company = {
name: "Innotech",
employees: [
{id: "1", name: "Peter", location: "IT", phone: "555-1212"},
{id: "2", name: "Samir", location: "IT", phone: "555-1213"},
{id: "3", name: "Milton", location: "loading dock", phone: "none"}
]
};
React.renderComponent(
<div><Grid data={company.employees} /><Button data={company} /></div>,
document.getElementById('employees')
);
