Question

我有表格，所以我想检索单击了按钮的特定行的键/值。

componentDidMount() {
    let com = this;
    firebase
        .database()
        .ref()
        .child("bills")
        .once("value", snap => {
            let items = [];
            snap.forEach(childD => {
                items.push({
                    balance: childD.val().balance,
                    bill_num: childD.val().bill_num,
                    date: childD.val().date,
                    key: childD.val().key,
                    name: childD.val().name,
                    total: childD.val().total
                });
            });
            Array.prototype.push.apply(com.state.products, items);
            com.setState({
                products: com.state.products
            });
        });
}

open = e => {
    e.preventDefault();
    console.log("kal" + this.state.value);
};
handleChange=event=>{
    this.setState({value: event.target.value});
  }

render() {
    return (
                    <table className="table table-striped">
                        <thead>
                            <tr>
                                <th scope="col">Bill number</th>
                                <th scope="col">Name</th>
                                <th scope="col">Date</th>
                                <th scope="col">Total</th>
                                <th scope="col">Balance</th>
                                <th scope="col">Delete</th>
                                <th scope="col">Open bill</th>
                            </tr>
                        </thead>
                        <tbody>
                            {console.log(this.state.products)}
                            {this.state.products.map((value, key) => (
                                <tr key={value.key}>
                                    <th scope="row">{value.bill_num}</th>
                                    <td>{value.name}</td>
                                    <td>{value.date}</td>
                                    <td>{value.total}</td>
                                    <td>{value.balance}</td>
                                    <td>
                                        <form onSubmit={this.returnOrder}>
                                            <input value={value.key} type="hidden" />
                                            <button className="btn btn-danger" type="submit">
                                                Return
                                            </button>
                                        </form>
                                    </td>
                                    <td>
                                        <form onSubmit={this.open}>
                                        <input value={value.key} onChange={this.handleChange} ref={ eKey => (this.inputeKey = eKey)} />

                                        <button className="btn btn-info" type="submit">
                                            Open
                                        </button>
                                        </form>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            ) : (
                <Printout
                    keya={{
                        key: this.props.keyas
                    }}
                />
            )}
    );
}
}

Answer 1

通常，React中的表由几个组件组成：整个表，行以及例如行中的按钮。因此，在表中放置行数组。每行都有它的子按钮。因此，您可以将道具发送给RowButtons子级，其中包含有关被单击的行的信息。

想要检索单击按钮的特定行的值。但我得到最后一个

1 个答案: