Question

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

Answer 1

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

document.writeln()

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

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

不会是这样的

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

所以，不管这样做，我们都应该在你更新状态时改变状态。

另外，我注意到你正在使用整个标签的innerHTML，因此它不仅包含名称，还包含工资，名称。所以在点击名称时，它不会显示指定和工资。所以完整的组件看起来应该是这样的。

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

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

1 个答案: