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

我有一个记录表，可以在其中动态添加和删除行/记录（单击按钮）。现在，我想在创建记录时存储每个记录的默认详细信息（比如designation=“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:函数（）{
返回{
行：[“记录1”、“记录2”、“记录3”]，
新价值：“新价值”
}
},
render:function（）{
返回(
记录
{this.state.rows.map（（r）=>(
{r}
this.deleteRow（r）}>Delete
))}
添加
);
},
updateNewValue:函数（组件）{
这是我的国家({
newValue:component.target.value
});
},
addRow:function（）{
var rows=this.state.rows
rows.push（this.state.newValue）
this.setState（{rows:rows}）
},
deleteRow:函数（记录）{
这是我的国家({
行：this.state.rows.filter（r=>r！==record）
});
},
showDetails:功能（记录）{
//单击记录的详细信息应可见。
}
});
React.render（，document.getElementById（'display'））

在本例中，您应该有一个单独的函数，用于在检查指定和薪资等条件后呈现需要呈现的内容

我希望这能纠正你的问题

代码：

var RecordsComponent=React.createClass({
getInitialState:函数（）{
返回{
行：[{姓名：'Record 1'，职务：“工程师”，工资：$100}，{姓名：'Record 2'，职务：“工程师”，工资：$100}，{姓名：'Record 3'，职务：“工程师”，工资：$100}]，
新值：“新值”，
扩展记录：[]
}
},
render:function（）{
返回(
记录
{this.state.rows.map（（r）=>(
{r.name}
this.deleteRow（r）}>Delete
{this.renderDesignation（r.name）}
{this.renderSalary（r.name）}
))}
添加
);
},
updateNewValue:函数（组件）{
这是我的国家({
newValue:{name:component.target.value}
});
},
addRow:function（）{
var rows=this.state.rows
var newValue=this.state.newValue
新值[“名称”]=“工程师”；
newValue[“工资”]=“100美元”；
rows.push（newValue）
this.setState（{rows:rows}）
},
deleteRow:函数（记录）{
这是我的国家({
行：this.state.rows.filter（r=>r.name！==record）
});
},
showDetails:功能（记录）{
//单击记录的详细信息应可见。
让expandedRecords=this.state.expandedRecords；
expandedRecords.push（record.target.innerHTML）；
this.setState（{…this.state，expandedRecords:expandedRecords}）；
},
renderDesignation:函数（名称）{
if（this.state.expandedRecords.includes（name））
{ 
var row=this.state.rows.filter（r=>r.name==name）[0]
返回（{“指定：+行指定}）；
}
返回；
},
renderSalary:函数（名称）{
if（this.state.expandedRecords.includes（name））
{ 
var row=this.state.rows.filter（r=>r.name==name）[0]
申报表（名称：{row.salary}）；
}
返回；
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);

在本例中，您应该有一个单独的函数，用于在检查指定和薪资等条件后呈现需要呈现的内容

我希望这能纠正你的问题

代码：

var RecordsComponent=React.createClass({
getInitialState:函数（）{
返回{
行：[{姓名：'Record 1'，职务：“工程师”，工资：$100}，{姓名：'Record 2'，职务：“工程师”，工资：$100}，{姓名：'Record 3'，职务：“工程师”，工资：$100}]，
新值：“新值”，
扩展记录：[]
}
},
render:function（）{
返回(
记录
{this.state.rows.map（（r）=>(
{r.name}
this.deleteRow（r）}>Delete
{this.renderDesignation（r.name）}
{this.renderSalary（r.name）}
))}
添加
);
},
updateNewValue:函数（组件）{
这是我的国家({
newValue:{name:component.target.value}
});
},
阿德罗：傅
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')
);