我正在尝试创建一个应用程序，允许用户添加包含姓名，电话和诊断的患者记录。它使他们能够添加新患者，编辑当前患者或完全删除他们。
我正在渲染姓名，电话，诊断，edit-diganosis按钮和EditDiagnosis组件。 EditDiagnosis组件呈现一种表单，其中输入字段已经加载了用户输入的值，以便他们可以对其进行编辑。
问题是，如果我有两个以上的患者记录，然后单击第二个记录上的edit-diganosis按钮，它将加载两个EditDiagnosis实例，一个实例位于第二个记录下，这是有意的，并且是第一个记录下的内容，那不是我想要的。我只希望当我单击某个记录的edit-diagnosis按钮时，它仅打开编辑该记录的表单，而不是所有记录。
我知道我做错了事，但我不知道如何将每个按钮与自己的记录相关联。
我需要帮助的组件是：PatientDiagnosis和EditDiagnosis
import React from 'react';
import Header from './Header';
import PatientDiagnosis from './PatientDiagnosis';
import AddPatient from './AddPatient';
import DiagnosisForm from './DiagnosisForm';
import EditDiagnosis from './EditDiagnosis';
export default class App extends React.Component {
state = {
patientsList: [],
inEditMode: false,
allowDelete: false
}
componentDidMount() {
try {
const data = localStorage.getItem('patientsList');
const parsedData = JSON.parse(data);
if (parsedData) {
this.setState(() => ({ patientsList: parsedData }));
}
} catch (e) {
}
}
componentDidUpdate(undefined, prevState) {
if (prevState.patientsList.length !== this.state.patientsList.length) {
const data = JSON.stringify(this.state.patientsList);
localStorage.setItem('patientsList', data);
}
}
addDiagnose = (patient) => {
if(patient.name && patient.phone && patient.diagnosis) {
this.setState((prevState) => ({ patientsList: prevState.patientsList.concat(patient)}));
}
else {
return 'Please fill out all the fields to continue.';
}
}
editDiagnose = (patient, id) => {
if (!patient.name || !patient.phone || !patient.diagnosis) {
return "Please fill out all the fields to continue.";
}
this.setState(prevState => {
prevState.patientsList[id] = patient;
return {
patientsList: prevState.patientsList,
inEditMode: !this.state.inEditMode
}
}
)
}
toggleEdit = (id) => {
console.log(id);
this.setState(() => ({inEditMode: !this.state.inEditMode}))
}
deleteDiagnose = (patientToDelete) => {
console.log(patientToDelete);
this.setState(
(prevState) => {
prevState.patientsList.map(patient => console.log(patient));
return {patientsList: prevState.patientsList.filter(patient => patientToDelete !==patient)};
}
)
}
render() {
return (
<div className="container">
<Header />
<PatientDiagnosis
patientsList={this.state.patientsList}
toggleEdit={this.toggleEdit}
inEditMode={this.state.inEditMode}
deleteDiagnose={this.deleteDiagnose}
editDiagnose={this.editDiagnose} />
<AddPatient addDiagnose={this.addDiagnose} />
</div>
)
}
}
const PatientDiagnosis = ({patientsList, deleteDiagnose, editDiagnose, inEditMode, toggleEdit}) => (
<div>
{patientsList.map((patient, index) => {
console.log(inEditMode);
return (
<div key={index}>
<h1>{patient.name}</h1>
<h1>{patient.phone}</h1>
<h1>{patient.diagnosis}</h1>
<button onClick={e => {e.preventDefault(); toggleEdit(patient)}}>Edit Diagnosis</button>
{inEditMode && <EditDiagnosis id={index} patient={patient} editDiagnose={editDiagnose} deleteDiagnose={deleteDiagnose}/>}
</div>
)
})}
</div>
)
export default PatientDiagnosis;
export default class EditDiagnosis extends React.Component {
state = {
id: this.props.id,
name: this.props.patient.name,
phone: this.props.patient.phone,
diagnosis: this.props.patient.diagnosis,
error: undefined
}
editDiagnose = (e, id) => {
e.preventDefault();
id = this.state.id;
const name = this.state.name;
const phone = this.state.phone;
const diagnosis = this.state.diagnosis;
const patient = {name, phone, diagnosis}
const error = this.props.editDiagnose(patient, id);
this.setState(()=>({error}));
if (!error) {
e.target.elements.name.value = '';
e.target.elements.phone.value = '';
e.target.elements.diagnosis.value = '';
}
}
toggleEdit = (e) => {
e.preventDefault();
this.setState(() => ({allowEdit: !this.state.allowEdit}))
}
changeName = (e) => {
const name = e.target.value;
this.setState(() => ({name}))
}
changePhone = (e) => {
const phone = e.target.value;
this.setState(() => ({phone}))
}
changeDiagnosis = (e) => {
const diagnosis = e.target.value;
this.setState(() => ({diagnosis}))
}
render() {
return (
<div>
{this.state.error && <p className="alert alert-danger" role="alert">{this.state.error}</p>}
{
<form
className="add-option"
id="patient-form"
onSubmit={this.editDiagnose}>
<DiagnosisForm
changeName={this.changeName}
changePhone={this.changePhone}
changeDiagnosis={this.changeDiagnosis}
name={this.state.name}
phone={this.state.phone}
diagnosis={this.state.diagnosis}
editDiagnose={this.editDiagnose}/>
<button className="btn btn-success" type="submit">Save Changes</button>
<button
className="btn btn-danger"
onClick={
e => {
e.preventDefault();
console.log(this.props.deleteDiagnose);
this.props.deleteDiagnose(this.props.patient);
}
}>Delete Diagnosis</button>
</form>}
</div>
)
}
}
export default class AddPatient extends React.Component {
state = {
error: undefined,
addNewPatient: false
}
addNewPatient = (e) => {
e.preventDefault();
this.setState(() => ({addNewPatient: !this.state.addNewPatient}));
}
cancelForm = (e) => {
e.preventDefault();
this.setState(() => ({error: undefined, addNewPatient: !this.state.addNewPatient}));
}
handleAddOption = (e) => {
e.preventDefault();
const name = e.target.elements.name.value.trim().toLowerCase();
const phone = e.target.elements.phone.value.trim().toLowerCase();
const diagnosis = e.target.elements.diagnosis.value.trim().toLowerCase();
const patient = {name, phone, diagnosis};
const error = this.props.addDiagnose(patient);
// this.setState(()=>({error, patientId: this.state.patientId + 1}));
if(patient.name && patient.phone && patient.diagnosis) {
this.setState(()=>({addNewPatient: !this.state.addNewPatient}));
}
if (!error) {
e.target.elements.name.value = '';
e.target.elements.phone.value = '';
e.target.elements.diagnosis.value = '';
}
}
render() {
return (
<div className="add-patient">
{this.state.error && <p className="alert alert-danger" role="alert">{this.state.error}</p>}
{!this.state.addNewPatient && <button onClick={this.addNewPatient} className="btn btn-primary">Add A New Patient</button>}
{this.state.addNewPatient &&
<form
className="add-option"
id="patient-form"
onSubmit={this.handleAddOption}>
<DiagnosisForm handleAddOption={this.handleAddOption}/>
<button className="btn btn-primary patient-form__btn" type="submit">Save</button>
<button onClick={this.cancelForm} className="btn btn-warning">Cancel</button>
</form>
}
</div>
)
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>