データ構造用のシンプルなグリッドベースのエディターを作成しようとしていますが、React.js で概念的な問題がいくつかあります。彼らのドキュメントはこれに関してあまり役に立たないので、ここの誰かが助けてくれることを願っています.
まず、外部コンポーネントから内部コンポーネントに状態を転送する正しい方法は何ですか? 内部コンポーネントの状態変化を外部コンポーネントに「バブルアップ」させることは可能ですか?
第 2 に、2 つの別個のコンポーネントでデータを共有して、一方の変更を他方に表示することはできますか?
以下は、私がやりたいことの簡単な例です ( 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')
);