Question

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

这里到处都是我的代码。只是一个主要的App组件，表单和表格在不同的组件中。

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'));

Answer 1

你应该像这样编写你的handleNameClick方法

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

不要忘记从

删除TplForm

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

希望这会有所帮助

将数据网格绑定到表单

1 个答案: