首页 > reactjs > 使用ReactJS显示记录的详细信息

使用ReactJS显示记录的详细信息 (showing details of a record using ReactJS)

2019-08-01 reactjs

问题

我有一个记录表,我可以动态添加和删除行/记录(按钮单击)。现在我想在创建该记录时存储每条记录的默认详细信息(比如说=“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'))

解决方法

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

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

码:

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

问题

I have a table of records in which I can add and delete rows/records dynamically (on button click). Now I want to store default details (lets say designation="Engineer" and salary="$100") of each record when that record is created, and these details of a record should be visible on clicking that record. Please tell how can I do that in ReactJS.

Code:

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

解决方法

You should have a separate function for rendering things that needs to be rendered after checking a condition like the designation and salary in this case.

I hope this will rectify your question.

Code:

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')
);
相似信息