Question

我有一个记录表，我可以动态添加和删除行/记录（按钮单击）。现在我想在创建该记录时存储每条记录的默认详细信息（比如说=“Engineer”和salary =“$ 100”），并且在点击该记录时应该可以看到这些记录的详细信息。请告诉我如何在ReactJS中做到这一点。

代码：

var RecordsComponent = React.createClass({
    getInitialState: function() {
        return {
            rows: ['Record 1', 'Record 2', 'Record 3'],
            newValue: "new value"
        }
    },
    render : function() {
        return (
            <div className="container" style={{"width" : "50%", "alignment" : "center"}}>
                <table className="table table-striped">
                    <thead>
                        <tr>
                            <th colSpan={2}>Records</th>
                        </tr>
                    </thead>
                    <tbody>
                    {this.state.rows.map((r) => (
                        <tr>
                            <td onClick={this.showDetails}>{r}</td>
                            <td>
                                <button className="tableBtn" onClick={() => this.deleteRow(r)}>Delete</button>
                            </td>
                        </tr>
                    ))}
                    </tbody>
                </table>
                <input trype="text" id={"newVal"} onChange={this.updateNewValue}></input>
                <button id="addBtn" onClick={this.addRow}>ADD</button>
            </div>
        );
    },
    updateNewValue: function(component) {
        this.setState({
            newValue: component.target.value
        });
    },
    addRow : function() {
        var rows = this.state.rows
        rows.push(this.state.newValue)
        this.setState({rows: rows})
    },
    deleteRow : function(record) {
        this.setState({
            rows: this.state.rows.filter(r => r !== record)
        });
    },
    showDetails : function(record) {
        //details of the clicked record should become visible.
    }
});

React.render(<RecordsComponent/>, document.getElementById('display'))

Answer 1

在这种情况下检查条件（如指定和工资）之后，你应该有一个单独的函数来渲染需要渲染的东西。

我希望这会纠正你的问题。

代码：

var RecordsComponent = React.createClass({
    getInitialState: function() {
        return {
            rows: [{name:'Record 1',designation:"Engineer",salary:"$100"}, {name:'Record 2',designation:"Engineer",salary:"$100"},{name:'Record 3',designation:"Engineer",salary:"$100"}],
            newValue: "new value",
            expandedRecords : []
        }
    },
    render : function() {
        return (
            <div className="container" style={{"width" : "50%", "alignment" : "center"}}>
                <table className="table table-striped">
                    <thead>
                        <tr>
                            <th colSpan={2}>Records</th>
                        </tr>
                    </thead>
                    <tbody>
                    {this.state.rows.map((r) => (
                        <tr>
                            <td onClick={this.showDetails}>{r.name}</td>
                            <td>
                                <button className="tableBtn" onClick={() => this.deleteRow(r)}>Delete</button>
                            </td>
                            {this.renderDesignation(r.name)}
                            {this.renderSalary(r.name)}
                        </tr>
                    ))}
                    </tbody>
                </table>
                <input type="text" id={"newVal"} onChange={this.updateNewValue}></input>
                <button id="addBtn" onClick={this.addRow}>ADD</button>
            </div>
        );
    },
    updateNewValue: function(component) {
        this.setState({
            newValue: {name:component.target.value}
        });
    },
    addRow : function() {
        var rows = this.state.rows
        var newValue = this.state.newValue
        newValue["designation"] = "engineer";
        newValue["salary"] = "$100";
        rows.push(newValue)
        this.setState({rows: rows})
    },
    deleteRow : function(record) {
        this.setState({
            rows: this.state.rows.filter(r => r.name !== record)
        });
    },
    showDetails : function(record) {
        //details of the clicked record should become visible.
        let expandedRecords = this.state.expandedRecords;
        expandedRecords.push(record.target.innerHTML);
        this.setState({...this.state, expandedRecords: expandedRecords });
    },
    renderDesignation : function(name){
            if(this.state.expandedRecords.includes(name))
      { 
        var row = this.state.rows.filter(r=> r.name === name)[0]
        return(<td>{"designation: "+row.designation}</td>);
      }
      return;
    },
    renderSalary : function(name){
            if(this.state.expandedRecords.includes(name))
      { 
        var row = this.state.rows.filter(r=> r.name === name)[0]
        return(<td>designation: {row.salary}</td>);
      }
        return;
    }
});
ReactDOM.render(
  <RecordsComponent />,
  document.getElementById('container')
);

使用ReactJS显示记录的详细信息

1 个答案: