Question

我反应还很陌生，我想在我的React应用程序中单击按钮添加一行。我点击了此链接How to add and remove table rows Dynamically in React.js

这样做，但是我无法将其翻译为我的代码。

我的代码在这里： KPIDetails.js 在这里，我在KPI Details.js文件中呈现视图。

<MuiThemeProvider>
    <React.Fragment>
        <Grid container>
            <Grid item xs={6} direction="row" alignItems="center">
                <table
                    className="table table-bordered table-hover"
                    id="tab_logic"
                >
                    <thead>
                    <tr>
                        <th className="text-center"> KPI</th>
                        <th className="text-center"> UOM</th>
                        <th className="text-center"> Base</th>
                        <th className="text-center"> Target</th>
                        <th className="text-center"> Target Date</th>
                    </tr>
                    </thead>
                    <tbody>
                    {this.state.rows.map((item, idx) => (
                        <tr id="addr0" key={idx}>
                            <td>{idx}</td>
                            <td>
                                <input
                                    type="text"
                                    name="Kpi_Before"
                                    value={this.state.rows[idx].Kpi_Before}
                                    onChange={this.handleChangeRows(idx)}
                                    className="form-control"
                                />
                            </td>
                            <td>
                                <input
                                    type="text"
                                    name="UOM_Before"
                                    value={this.state.rows[idx].UOM_Before}
                                    onChange={this.handleChangeRows(idx)}
                                    className="form-control"
                                />
                            </td>
                            <td>
                                <input
                                    type="text"
                                    name="Base_Before"
                                    value={this.state.rows[idx].Base_Before}
                                    onChange={this.handleChangeRows(idx)}
                                    className="form-control"
                                />
                            </td>
                            <td>
                                <input
                                    type="text"
                                    name="Target_Before"
                                    value={this.state.rows[idx].Target_Before}
                                    onChange={this.handleChangeRows(idx)}
                                    className="form-control"
                                />
                            </td>
                            <td>
                                <input
                                    type="text"
                                    name="Target_Before"
                                    value={this.state.rows[idx].dateTime}
                                    onChange={this.handleChangeRows(idx)}
                                    className="form-control"
                                />
                            </td>
                        </tr>
                    ))}
                    </tbody>
                </table>
                <button
                    onClick={this.handleRemoveRow}
                    className="pull-right btn btn-default"
                >
                    Delete Row
                </button>
                <Button
                    variant="outlined"
                    color="primary"
                    onClick={this.handleAddRow}
                    size="small"
                    style={styles.button}
                >
                    +
                </Button>
            </Grid>
        </Grid>
        < /React.Fragment>
</MuiThemeProvider>

这是我调用所有功能的js文件

User Form.js

export class UserForm extends Component {
    state = {
        step: 1,
        Title: "",
        Details: "",
        What: "",
        Why: "",
        How: "",
        Status: "",
        Cost: "",
        Benefits: "",
        Kpi_Before: "",
        Kpi_After: "",
        Time: "",
        UOM_Before: "",
        Base_Before: "",
        Target_Before: "",
        dateTime: null,
        rows: ["row1"]
    };

    //1
    handleChangeRows = idx => e => {
        const {Kpi_Before, value} = e.target;
        const rows = [...this.state.rows];
        rows[idx] = {
            [Kpi_Before]: value
        };
        this.setState({
            rows
        });
    };

    //2
    handleAddRow = () => {
        const item = {
            KPI_Before: "",
            UOM_Before: "",
            Base_Before: "",
            Target_Before: "",
            dateTime: ""
        };
        this.setState({
            rows: [...this.state.rows, item]
        });
    };

    //3
    handleRemoveRow = () => {
        this.setState({
            rows: this.state.rows.slice(0, -1)
        });
    };
}

我在做什么错。还有其他方法吗？

Answer 1

我添加了：

state = {
    rows: []
  };

在组件中，它解决了问题

出现错误TypeError：无法读取null的属性“行”

1 个答案: