Я перебираю заметки в компоненте React. Если пользователь хочет отредактировать заметку, я хотел бы заменить текст заметки полем ввода, заполнить текущим значением текста handleChange и показать поле ввода только для этой конкретной записи. Прямо сейчас он меняет все записи, потому что он находится внутри итерации в компоненте. Я использую Semanti c -ui-реагировать.
Вот изображение нежелательных результатов после того, как пользователь нажимает значок редактирования:
Мой компонент выглядит следующим образом:
import React, { Component } from "react";
import { connect } from "react-redux";
import { Comment, Table, Form, Button, Icon, Input } from "semantic-ui-react";
import { createNote } from "../actions/createNoteAction";
const uuidv4 = require("uuid/v4");
class ServiceLogsComponent extends Component {
state = {
entry: "",
showInput: false
}
handleChange = (e, { name, value }) => this.setState({ [name]: value })
handleSubmit = (e) => {
e.preventDefault()
const userId = 2;
this.props.createNote(this.state.entry, this.props.serviceId, userId)
this.setState({ entry: "" })
}
handleUpdate = e => {
this.setState({ showInput: true })
}
filterNotes = () => {
const filteredNotes = this.props.notes.filter(note => note.service_id === this.props.serviceId)
return filteredNotes
}
render() {
console.log(this.state)
return (
<>
<div style={{ display: this.props.showServiceLogs }}>
<Table>
<Table.Body>
<Comment>
<Comment.Group>
{this.filterNotes().map((serviceNote) => (
<Comment.Content>
<Table.Row key={uuidv4}>
<Table.Cell>
<Comment.Author as="a">
{serviceNote.created_at}
</Comment.Author>
</Table.Cell>
<Table.Cell>
<Comment.Metadata>
{serviceNote.user.username}
</Comment.Metadata>
</Table.Cell>
{serviceNote.user.id !== 1 ? (
<Table.Cell>
<Icon
name="edit outline"
onClick={(e) => this.handleUpdate(e)}
/>
<Icon name="delete" />
</Table.Cell>
) : null}
</Table.Row>
<Table.Row>
<Table.Cell>
{!this.state.showInput ?
<Comment.Text>{serviceNote.entry}</Comment.Text>
:
<Form onSubmit={(e) => this.handleSubmit(e)}>
<Form.Input value={serviceNote.entry} name="entry" onChange={this.handleChange}>
</Form.Input>
<Button type="submit" size="small">Update</Button>
</Form>
}
</Table.Cell>
</Table.Row>
</Comment.Content>
))}
<Form onSubmit={(e) => this.handleSubmit(e)}>
<Form.TextArea
style={{ height: "50px" }}
onChange={this.handleChange}
name="entry"
value={this.state.entry}
/>
<Form.Button
type="submit"
content="Add Note"
labelPosition="left"
icon="edit"
primary
/>
</Form>
</Comment.Group>
</Comment>
</Table.Body>
</Table>
</div>
</>
);
}
}
const mapStateToProps = state => {
return {
services: state.services.services,
notes: state.notes.notes
};
};
const mapDispatchToProps = dispatch => {
return {
createNote: (entry, serviceId, userId) => dispatch(createNote(entry, serviceId, userId))
}
};
export default connect(mapStateToProps, mapDispatchToProps)(ServiceLogsComponent);
У меня также возникают проблемы с onChange при редактировании текста. Это не изменится.