Reactjs 将数据网格绑定到表单

我的UI左侧有一个简单的数据表，右侧有一个表单。作为ReactJS的新用户，我能够毫不费力地完成这项任务。但是，我希望用户能够单击每行的“名称”列，并将其填充到右侧的表单中。我有一个使用jQuery的类似页面和一个小的路由库，我只需将每一行链接到一个像#edit/：id这样的路由，然后使用jQuery通过选择器手动绑定。我尝试React的原因是为了避免这样做

到目前为止，这里的任何地方都是我的代码。只是一个主应用程序组件，表单和表在单独的组件中

var TplList = React.createClass({
    getInitialState() {
        return {
            data: { rows: [] }
        };
    },

    componentDidMount() {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: this.props.url,
            success: function(response) {
                //console.log(response);
                this.setState({
                    data: response
                });
            }.bind(this),
            error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },

    render: function() {
        var tblRows = this.state.data.rows.map(function(result, index) {
            return <TplRow key={index} tpl={result} />
        });

        return (
            <div>
                <h3 className="formHeader">Workcell - Master Templates</h3>
                <table id="tplDataTable" width="100%" className="form" cellpadding="2" cellspacing="0" border="0">
                    <thead>
                        <tr className="titleGreen">
                            <th>Name</th>
                            <th>By</th>
                            <th>Date</th>
                            <th className="th_right">R/C</th>
                            <th className="th_right">Copies</th>
                            <th className="th_right">Vol (10mM)</th>
                        </tr>
                    </thead>
                    <tbody>{tblRows}</tbody>
                </table>
            </div>
        );
    }
});

var TplRow = React.createClass({
    handleNameClick: function() {
    },

    render: function() {
        var tpl = this.props.tpl;
        var cls = (tpl.index % 2 > 0) ? "" : "alt";
        var volume = (tpl.volume > 0) ? tpl.volume + "\u00b5" + "l" : "\u00a0";
        return (
            <tr className={cls}>
                <td><a href="#" onClick={handleNameClick}>{tpl.name}</a></td>
                <td>{tpl.username}</td>
                <td>{tpl.cre_date}</td>
                <td>{tpl.compound_placement}</td>
                <td>{tpl.copies}</td>
                <td>{volume}</td>
            </tr>
        );
    }
});


var TplForm = React.createClass({
    getInitialState() {
        return {
            "copies": 10  
        };
    },
    render: function() {
        return (
            <div>
                <h3 className="formHeader">Edit Master Template</h3>
                <table className="form" width="100%" cellpadding="3" cellspacing="0">
                    <tbody>
                        <tr>
                            <td className="label"><label htmlFor="tplCopies">Copies</label></td>
                            <td className="field">
                                <input 
                                    type="number" min="0" max="500" 
                                    name="tplCopies" 
                                    id="tplCopies" 
                                    value={this.state.copies} />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        );
    }
});

var MasterTemplateApp = React.createClass({
    render: function() {
        return ( 
        <div id="container">
            <div id="wc_tpl_left">
                <TplList url="/cfc/com_admin_transfer.cfc?method=getWCTemplateData" />
            </div>
            <div id="wc_tpl_right">
                <TplForm />
            </div>
            <div className="tpl_clear"></div>
        </div>
        );
    } 
});


ReactDOM.render(<MasterTemplateApp />, document.getElementById('app_wc_master_tpl'));

var TplList=React.createClass({
getInitialState（）{
返回{
数据：{行：[]}
};
},
componentDidMount（）{
$.ajax({
键入：“获取”，
数据类型：“json”，
url:this.props.url，
成功：功能（响应）{
//控制台日志（响应）；
这是我的国家({
数据：答复
});
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.url，status，err.toString（））；
}.绑定（此）
});
},
render:function（）{
var tblRows=this.state.data.rows.map（函数（结果，索引）{
返回
});
返回(
Workcell-主模板
名称
通过
日期
信用证
副本
体积（10毫米）
{tblRows}
);
}
});
var TplRow=React.createClass({
handleNameClick:函数（）{
},
render:function（）{
var tpl=this.props.tpl；
var cls=（tpl.index%2>0）？“”：“alt”；
var volume=（tpl.volume>0）？tpl.volume+“\u00b5”+“l”：“\u00a0”；
返回(
{tpl.username}
{tpl.cre_date}
{tpl.component_placement}
{tpl.copies}
{volume}
);
}
});
var TplForm=React.createClass({
getInitialState（）{
返回{
“副本”：10份
};
},
render:function（）{
返回(
编辑主模板
副本
);
}
});
var MasterTemplateApp=React.createClass({
render:function（）{
报税表（
);
} 
});
ReactDOM.render（，document.getElementById（'app_wc_master_tpl'）；

您应该像这样编写handleNameClick方法

handleNameClick: function() {
  ReactDOM.render(<TplForm />, document.getElementById('wc_tpl_right'))
}

handleNameClick:function（）{
ReactDOM.render（，document.getElementById（'wc\u tpl\u right'））
}

不要忘记从中删除TplForm

<div id="wc_tpl_right">
   <TplForm />
</div>

希望这有帮助