添加空白记录/行，而不是在ReactJS中输入详细信息的行

我用ReactJS编写了一个简单的代码，其中记录显示在表中。每行中的名称可见，但单击该行后，记录/行的名称和薪资将可见。问题是，当我通过输入详细信息（姓名、职务和薪水）添加新记录时，会添加一条空白记录，而不是输入了详细信息的记录。请告诉我可能是什么问题

代码：

var RecordsComponent = React.createClass({
    getInitialState: function() {
        return {
            records: [{name:'Kevin Petersen',designation:"Junior Software Engineer",salary:"$1000"}, {name:'Michel Johnson',designation:"Senior Software Engineer",salary:"$2500"},{name:'Shane Bond',designation:"HR Manager",salary:"$1250"}],
            newRecord: [{name:'new name', designation:'new designation', salary:'new salary'}],
            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.records.map((r) => (
                        <tr>
                            <td onClick={this.showDetails}>
                                {r.name}
                                {this.renderDesignation(r.name)}<span></span>
                                {this.renderSalary(r.name)}
                            </td>
                            <td>
                                <button className="tableBtn" onClick={() => this.deleteRow(r)}>Delete</button>
                            </td>
                        </tr>
                    ))}
                    </tbody>
                </table>
                <input type="text" id={"newNameId"} placeholder={"name"} onChange={this.updateNewName}></input>
                <input type="text" id={"newDesId"} placeholder={"designation"} onChange={this.updateNewDesignation}></input>
                <input type="text" id={"newSalId"} placeholder={"salary"} onChange={this.updateNewSalary}></input>
                <button id="addBtn" onClick={this.addRow}>ADD</button>
            </div>
        );
    },
    updateNewName: function(component) {
        this.setState({
            newRecord: {name:component.target.value},
        });
    },
    updateNewDesignation: function(component) {
        this.setState({
            newRecord: {designation:component.target.value},
        });
    },
    updateNewSalary: function(component) {
        this.setState({
            newRecord: {salary:component.target.value}
        });
    },
    addRow : function() {
        var records = this.state.records;
        var newRecord = this.state.newRecord;
        records.push(newRecord)
        this.setState({records: records})
    },
    deleteRow : function(record) {
        this.setState({
            records: this.state.records.filter(r => r !== record)
        });
    },
    showDetails : function(record) {
        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.records.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.records.filter(r=> r.name === name)[0]
            return(<td>Salary: {row.salary}</td>);
        }
        return;
    }
});
React.render(
    <RecordsComponent />,
    document.getElementById('display')
);

var RecordsComponent=React.createClass({
getInitialState:函数（）{
返回{
记录：[姓名：'Kevin Petersen'，职务：“初级软件工程师”，工资：'1000美元]，{姓名：'Michel Johnson'，职务：“高级软件工程师”，工资：'2500美元]，{姓名：'Shane Bond'，职务：“人力资源经理”，工资：'1250美元]，
新记录：[{姓名：'new name'，职务：'new designation'，薪金：'new salary'}]，
扩展记录：[]
}
},
render:function（）{
返回(
记录
{this.state.records.map（（r）=>(
{r.name}
{this.renderDesignation（r.name）}
{this.renderSalary（r.name）}
this.deleteRow（r）}>Delete
))}
添加
);
},
updateNewName:函数（组件）{
这是我的国家({
新记录：{name:component.target.value}，
});
},
updateNewDesignation:函数（组件）{
这是我的国家({
newRecord:{名称：component.target.value}，
});
},
UpdateNewAlary:函数（组件）{
这是我的国家({
新记录：{salary:component.target.value}
});
},
addRow:function（）{
var记录=this.state.records；
var newRecord=this.state.newRecord；
records.push（新记录）
this.setState（{records:records}）
},
deleteRow:函数（记录）{
这是我的国家({
记录：this.state.records.filter（r=>r！==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.records.filter（r=>r.name==name）[0]
返回（{“指定：+行指定}）；
}
返回；
},
renderSalary:函数（名称）{
if（this.state.expandedRecords.includes（name））{
var row=this.state.records.filter（r=>r.name==name）[0]
返回（工资：{row.Salary}）；
}
返回；
}
});
反应(
,
document.getElementById（'display'）
);

实际上，您正在使用setState rite？如果你用这样的东西

this.setState({
            newRecord: {salary:component.target.value}
        });

现有状态的newRecord属性将被完全替换。它不会更新状态的属性newRecord。所以在这一点上，状态将是这样的

this.state = {//otherproperties,
              newRecord: {salary:'some value'}

this.state = {//other properties,
              newRecord: {name: 'some name', salary: 'some salary', designation : 'some designation'}

不会是这样的

this.state = {//otherproperties,
              newRecord: {salary:'some value'}

this.state = {//other properties,
              newRecord: {name: 'some name', salary: 'some salary', designation : 'some designation'}

因此，我们不应该这样做，而是应该在更新状态时对状态进行变异

另外，我注意到您使用的是整个标记的innerHTML，因此它不仅包含名称，还包含薪水和名称。因此，单击名称时，不会显示名称和薪资。所以完整的组件应该是这样的

var RecordsComponent = React.createClass({
    getInitialState: function() {
        return {
            records: [{name:'Kevin Petersen',designation:"Junior Software Engineer",salary:"$1000"}, {name:'Michel Johnson',designation:"Senior Software Engineer",salary:"$2500"},{name:'Shane Bond',designation:"HR Manager",salary:"$1250"}],
            newRecord: [{name:'new name', designation:'new designation', salary:'new salary'}],
            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.records.map((r) => (
                        <tr>
                            <td onClick={this.showDetails}>
                                {r.name}
                            </td>
                            {this.renderDesignation(r.name)}
                            {this.renderSalary(r.name)}
                            <td>
                                <button className="tableBtn" onClick={() => this.deleteRow(r)}>Delete</button>
                            </td>
                        </tr>
                    ))}
                    </tbody>
                </table>
                <input type="text" id={"newNameId"} placeholder={"name"} onChange={this.updateNewName}></input>
                <input type="text" id={"newDesId"} placeholder={"designation"} onChange={this.updateNewDesignation}></input>
                <input type="text" id={"newSalId"} placeholder={"salary"} onChange={this.updateNewSalary}></input>
                <button id="addBtn" onClick={this.addRow}>ADD</button>
            </div>
        );
    },
    updateNewName: function(component) {
        this.setState({...this.state,
            newRecord: {...this.state.newRecord,name:component.target.value},
        });
    },
    updateNewDesignation: function(component) {
        this.setState({...this.state,
            newRecord: {...this.state.newRecord,designation:component.target.value},
        });
    },
    updateNewSalary: function(component) {
        this.setState({...this.state,
            newRecord: {...this.state.newRecord,salary:component.target.value}
        });
    },
    addRow : function() {
        var records = this.state.records;
        var newRecord = this.state.newRecord;
        records.push(newRecord)
        this.setState({records: records})
    },
    deleteRow : function(record) {
        this.setState({
            records: this.state.records.filter(r => r !== record)
        });
    },
    showDetails : function(record) {
        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.records.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.records.filter(r=> r.name === name)[0]
            return(<td>Salary: {row.salary}</td>);
        }
        return;
    }
});

var RecordsComponent=React.createClass({
getInitialState:函数（）{
返回{
记录：[姓名：'Kevin Petersen'，职务：“初级软件工程师”，工资：'1000美元]，{姓名：'Michel Johnson'，职务：“高级软件工程师”，工资：'2500美元]，{姓名：'Shane Bond'，职务：“人力资源经理”，工资：'1250美元]，
新记录：[{姓名：'new name'，职务：'new designation'，薪金：'new salary'}]，
扩展记录：[]
}
},
render:function（）{
返回(
记录
{this.state.records.map（（r）=>(
{r.name}
{this.renderDesignation（r.name）}
{this.renderSalary（r.name）}
this.deleteRow（r）}>Delete
))}
添加
);
},
updateNewName:函数（组件）{
this.setState（{…this.state，
newRecord:{…this.state.newRecord，名称：component.target.value}，
});
},
updateNewDesignation:函数（组件）{
this.setState（{…this.state，
newRecord:{…this.state.newRecord，名称：component.target.value}，
});
},
UpdateNewAlary:函数（组件）{
this.setState（{…this.state，
newRecord:{…this.state.newRecord，工资：component.target.value}
});
},
addRow:function（）{
var记录=this.state.records；
var newRecord=this.state.newRecord；
R