1
나는 react-16을 처음 사용하고 React-16 저장 및 삭제 작업을 수행했다. 편집/업데이트 작업에 관해서는 접근 방법에 어려움을 겪었다. 업데이트 버튼, 모달 열려 있지만 각 필드에 표시되지 않는 값을 얻으십시오 .2) setState 함수에서 폼 값을 저장 한 후 어떻게 업데이트합니까? 감사. 당신의 openEditModal() 방법에서React 16 Modal form update operation
import React, { Component } from "react";
import {Form,FormGroup,FormControl,Col,Button,Modal,ButtonToolbar,Table} from "react-bootstrap";
class Dashboard extends Component {
constructor(props) {
super(props);
this.state = {
name: "",
description: "",
amount: "",
date: "",
show: false,
formdata: []
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
this.showModal = this.showModal.bind(this);
this.hideModal = this.hideModal.bind(this);
this.showEditModal = this.showEditModal.bind(this);
}
showModal() {
this.setState({ show: true });
}
showEditModal(event) {
this.setState({
show: true,
name: this.state.name.value,
description: this.state.description.value,
amount: this.state.amount.value,
date: this.state.date.value
});
}
hideModal() {
this.setState({
show: false,
name: "",
description: "",
amount: "",
date: ""
});
}
handleInputChange(event) {
this.setState({
[event.target.name]: event.target.value,
[event.target.description]: event.target.value,
[event.target.amount]: event.target.value,
[event.target.date]: event.target.value
});
}
handleSubmit(event) {
const formItem = {
name: this.state.name,
description: this.state.description,
amount: this.state.amount,
date: this.state.date
};
if (
this.state.name === "" ||
this.state.amount === "" ||
this.state.date === ""
) {
alert("Please fill mandatory filed");
} else {
this.setState(prevState => ({
formdata: prevState.formdata.concat(formItem)
}));
alert("form submited: ");
this.setState({
name: "",
description: "",
amount: "",
date: ""
});
}
event.preventDefault();
}
deleteExpense(i) {
alert("are you sure you want to Delete this item ?");
this.setState({
formdata: this.state.formdata.filter((item, index) => {
return index !== i;
})
});
}
render() {
return (
<div>
<p>Welcome</p>
<ButtonToolbar>
<Button bsStyle="primary" onClick={this.showModal}>
Add Expenses
</Button>
<Table striped bordered condensed hover>
<thead>
<tr>
<th>name</th>
<th>description</th>
<th>amount</th>
<th>date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{this.state.formdata.map((item, i) => (
<tr key={i}>
<td>{item.name}</td>
<td>{item.description}</td>
<td>{item.amount}</td>
<td>{item.date}</td>
<td>
<Button bsStyle="warning" onClick={this.showEditModal}>
Update
</Button>
<Button
bsStyle="danger"
onClick={() => this.deleteExpense(i)}
>
Delete
</Button>
</td>
<td />
</tr>
))}
</tbody>
</Table>
<Modal
{...this.props}
show={this.state.show}
onHide={this.hideModal}
dialogClassName="custom-modal"
>
<Modal.Header closeButton>
<Modal.Title
id="contained-modal-title-lg "
className="text-center"
>
Add Expenses
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form horizontal onSubmit={this.handleSubmit}>
<FormGroup controlId="formHorizontalEmail">
<Col smOffset={4} sm={4}>
<FormControl
type="Text"
placeholder="name"
name="name"
value={this.state.name}
onChange={this.handleInputChange}
/>
</Col>
</FormGroup>
<FormGroup controlId="formHorizontalPassword">
<Col smOffset={4} sm={4}>
<FormControl
type="description"
placeholder="description"
name="description"
value={this.state.description}
onChange={this.handleInputChange}
/>
</Col>
</FormGroup>
<FormGroup controlId="formHorizontalPassword">
<Col smOffset={4} sm={4}>
<FormControl
type="amount"
placeholder="amount"
name="amount"
value={this.state.amount}
onChange={this.handleInputChange}
/>
</Col>
</FormGroup>
<FormGroup controlId="formHorizontalPassword">
<Col smOffset={4} sm={4}>
<FormControl
type="date"
placeholder="date"
name="date"
value={this.state.date}
onChange={this.handleInputChange}
/>
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={5} sm={4}>
<Button type="submit" bsStyle="primary">
Add
</Button>
</Col>
</FormGroup>
</Form>
</Modal.Body>
</Modal>
</ButtonToolbar>
</div>
);
}
}
export default Dashboard;
고마워요. 첫 번째 문제는 해결되지만 두 번째 문제는 새로운 값으로 업데이트 할 때 이전 항목을 업데이트하는 대신 새로운 항목을 만듭니다. –
이전 상태에서'.concat()'을 사용했기 때문에 이것은 단순히 배열의 끝에 항목을 추가하기 때문입니다. 나는 상태의 항목을 업데이트하는 한 가지 방법을 제공하기 위해 내 대답을 업데이트했습니다. –
업데이트 된 코드로 바뀌었지만 값을 추가하고 save.it를 수행해도 항목이 전혀 작성되지 않습니다. –