如何在React列表中切换按钮

Question

我呈现了一个React列表，每个列表项中都有一个Edit按钮。我想从数据切换到输入表单，然后再切换回来。与本文中的此应用程序类似：https://medium.com/the-andela-way/handling-user-input-in-react-crud-1396e51a70bf.您可以在以下位置查看演示：https://codesandbox.io/s/fragrant-tree-0t13x.

这就是我的React组件显示列表的地方：

import React, { Component } from "react";
import PriceBox from "../SinglePricebox/index";
// import SecurityForm from "../SecurityForm/index";
import AddPriceForm from "../AddPriceForm/index";
// import { uuid } from "uuidv4";
export default class PriceForm extends Component {
constructor(props) {
super(props);
this.state = {
priceArr: this.props.pricelist,
// newPriceArr: this.props.updatePrice,
showPricePopup: false,
addPricePopup: false,
isToggleOn: true,
date: props.date || "",
number: props.number || ""
};
}
updateInput = ({ target: { name, value } }) =>
this.setState({ [name]: value });
togglePopup = () => {
this.setState(prevState => ({
showPopup: !prevState.showPopup 
}));
};
togglePricePopup = () => {
this.setState(prevState => ({
showPricePopup: !prevState.showPricePopup
}));
};
addPricePopup = () => {
this.setState(prevState => ({
addPricePopup: !prevState.addPricePopup
}));
};
/* adds a new price to the list */
addPrice = newPrice => {
this.setState(prevState => ({
addPricePopup: !prevState.addPricePopup,
// spreads out the previous list and adds the new price with a unique id
priceArr: [...prevState.priceArr, { ...newPrice }]
}));
};
// handlePriceSubmission = () => {
//   const { updatePrice } = this.props;
//   this.addPricePopup();
//   updatePrice(priceArr);
// };
toggleItemEditing = (index) => {
this.setState(prevState => ({
priceArr: prevState.priceArr.map(priceItem => {
// isToggleOn: !state.isToggleOn;
})
}));
};
// toggleItemEditing = index => {
//   this.setState({
//     items: this.state.items.map((item, itemIndex) => {
//       if (itemIndex === index) {
//         return {
//           ...item,
//           isEditing: !item.isEditing
//         }
//       }
//       return item;
//     })
//   });
// };

render() {
// const { updatePrice } = this.props;
return (
<div className="popup">
<div className="popup-inner">
<div className="price-form">
<h2>Prices</h2>
<div className="scroll-box">
{this.state.priceArr.map((props) => (
<PriceBox
{...props}
key={props.date}
// toggleItemEditing={this.toggleItemEditing()}
onChange={this.handleItemUpdate}
/>
))}
</div>
<div className="buttons-box flex-content-between">
<button
type="button"
onClick={this.addPricePopup}
className="btn add-button">Add +</button>
{this.state.addPricePopup && (
<AddPriceForm
addPrice={this.addPrice}
cancelPopup={this.addPricePopup}
/>
)}
<div className="add-btns">
<button
type="button"
onClick={() => this.props.closeUpdatePopup()}
className="btn cancel-button"
>
Close
</button>
</div>
</div>
</div>
</div>
</div>
);
}
}

上面组件中的列表是：

<div className="scroll-box">
{this.state.priceArr.map((props) => (
<PriceBox
{...props}
key={props.date}
// toggleItemEditing={this.toggleItemEditing()}
onChange={this.handleItemUpdate}
/>
))}
</div>

这是一个列表项：

import React, { Component } from "react";
export default class SinglePricebox extends Component {
state = {
showPopup: false, //don't show popup
todaydate: this.props.date
};
/* toggle and close popup edit form window */
togglePopup = () => {
this.setState(prevState => ({
showPopup: !prevState.showPopup
}));
};

toggleEditPriceSubmission = getPriceIndex => {
const { toggleItemEditing, date } = this.props;
// toggle the pop up (close)
// this.showPopup();
toggleItemEditing({ ...getPriceIndex, date });
console.log("date?", date);
};
/* handles edit current security form submissions */
// handleEditSecuritySubmission = editSecurity => {
//   const { editCurrentSecurity, id } = this.props;
//   // toggle the pop up (close)
//   this.togglePopup();
//   // sends the editSecurity fields (name, isin, country) + id back to
//   // App's "this.editCurrentSecurity"
//   editCurrentSecurity({ ...editSecurity, id });
// };
render() {
return (
<div className="pricebox">
<article className="pricetable">
{this.toggleEditPriceSubmission
? "editing" : "not editing"}
<table>
<tbody>
<tr>
<td className="date-width">{this.props.date}</td>
<td className="price-width">{this.props.number}</td>
<td className="editing-btn">
<button
type="button"
className="edit-btn"
onClick={this.toggleEditPriceSubmission}
>
{this.toggleEditPriceSubmission ? "Save" : "Edit"}
</button>
</td>
<td>
<button
type="button"
className="delete-btn">
X
</button>
</td>
</tr>
</tbody>
</table>
</article>
</div>
);
}
}

我整个下午都在努力切换每个列表项中的编辑按钮。我试图获取每个列表项的密钥，即this.prop.date。

您可以在CodeSandBox上详细查看我的代码：https://codesandbox.io/s/github/kikidesignnet/caissa

Answer 1

我将创建一个组件，该组件将把列表项作为表单处理，并将其更新为SecurityForm。

{this.state.priceArr.map((props) => {
if(props) {
return <PriceListForm methodToUpdate {...props} />
}else {
retun (
<PriceBox
{...props}
key={props.date}
// toggleItemEditing={this.toggleItemEditing()}
onChange={this.handleItemUpdate}
/>
);
}
})}

并且使CCD_ 3看起来像CCD_。通过这种方式，您将拥有两个逻辑不那么复杂的不同组件，而不是拥有一个具有复杂验证的大型组件来检查是否显示输入。

Answer 2

创建一个名为Edit的函数来更新状态

Edit = (id) => {
this.setState({edit: !this.state.edit, id})
}

而不是

<td className="country-width">{this.props.country}</td>

做一些类似的事情

<td className="country-width">{this.state.edit ? <input type="text" value={this.props.country} onChange={() => UPDATE_THE_CONTENT}/> : this.props.isin}</td>

调用Edit Button的Edit函数onclick，并将该td的ID作为参数进行更新。注意：默认情况下，编辑状态的值为false/null。您可以使用onChange来更新该框，也可以使用其他一些技术，比如创建一个按钮并使用它来更新它。希望这能帮助你