Я довольно новичок в кодировании и не совсем понимаю, как включить функцию удаления и кнопку в мое приложение реагирования, может кто-нибудь показать мне, как или указать мне сайт, который может помочь.
Это мой список контактов. js
import React , { Component } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
const Contact = props => (
<tr>
<td className = { props.contact.contact_completed ? 'completed' : ''}>{props.contact.first_name}</td>
<td className = { props.contact.contact_completed ? 'completed' : ''}>{props.contact.last_name}</td>
<td className = { props.contact.contact_completed ? 'completed' : ''}>{props.contact.email}</td>
<td className = { props.contact.contact_completed ? 'completed' : ''}>{props.contact.mobile}</td>
<td>
<Link to={"/edit/" + props.contact._id}>Edit</Link>
</td>
</tr>
)
export default class ContactsList extends Component {
constructor(props) {
super(props);
this.state = {
contacts: []
};
}
componentDidMount() {
axios.get('http://localhost:4000/contacts')
.then( res => {
this.setState({
contacts: res.data
})
})
.catch( err => console.log(err));
}
componentDidUpdate() {
axios.get('http://localhost:4000/contacts')
.then( res => {
this.setState({
contacts: res.data
})
})
.catch( err => console.log(err));
}
contactList = () => this.state.contacts.map(
(contact, index) => <Contact contact={contact} key={index} />
)
render() {
return (
<div>
<h3>Contacts List</h3>
<table className="table table-striped" style={{ marginTop: 20}}>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Mobile</th>
</tr>
</thead>
<tbody>
{ this.contactList() }
</tbody>
</table>
</div>
)
}
}
Мой список контактов для редактирования. js
import React , { Component } from 'react';
import axios from 'axios';
export default class EditContact extends Component {
constructor(props) {
super(props);
this.state = {
first_name: '',
last_name: '',
email: '',
mobile: ''
}
}
componentDidMount() {
axios.get('http://localhost:4000/contacts/' + this.props.match.params.id)
.then( res => {
this.setState({
first_name: res.data.first_name,
last_name: res.data.last_name,
email: res.data.email,
mobile: res.data.mobile
})
})
.catch( err => console.log(err));
}
onChangeFirstName = (e) => {
this.setState({
first_name: e.target.value
});
}
onChangeLastName = (e) => {
this.setState({
last_name: e.target.value
});
}
onChangeEmail = (e) => {
this.setState({
email: e.target.value
});
}
onChangeMobile = (e) => {
this.setState({
mobile: !this.state.mobile
});
}
onSubmit = (e) => {
e.preventDefault();
const obj = {
first_name: this.state.first_name,
last_name: this.state.last_name,
email: this.state.email,
mobile: this.state.mobile
};
axios.post('http://localhost:4000/contacts/update/' + this.props.match.params.id, obj)
.then( res => console.log(res.data));
this.props.history.push('/');
}
render() {
return (
<div>
<h3>Update Contacts</h3>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>First Name: </label>
<input type="text"
className="form-control"
value={this.state.first_name}
onChange={this.onChangeFirstName}
/>
</div>
<div className="form-group">
<label>Last Name: </label>
<input type="text"
className="form-control"
value={this.state.last_name}
onChange={this.onChangeLastName}
/>
</div>
<div className="form-group">
<label>Email: </label>
<input type="text"
className="form-control"
value={this.state.email}
onChange={this.onChangeEmail}
/>
</div>
<div className="form-group">
<label>Mobile: </label>
<input type="number"
className="form-control"
value={this.state.mobile}
onChange={this.onChangeMobile}
/>
</div>
<br />
<div className="form-group">
<input type="submit" value="Update Contact" className="btn btn-primary" />
</div>
</form>
</div>
)
}
}
мой контакт для удаления. js. это где я теряюсь. я должен сделать это в моих контактах редактирования. js или создать файл удаления контактов. js файл?
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import Button from 'react-bootstrap/Button';
export default class DeleteContact extends Component {
constructor(props) {
super(props);
this.deleteContact = this.deleteContact.bind(this);
}
deleteContact() {
axios.delete('http://localhost:4000/contacts/delete-contact/' + this.props.obj._id)
.then((res) => {
console.log('Contact successfully deleted!')
}).catch((error) => {
console.log(error)
})
}
render() {
return (
<tr>
<td>{this.props.obj.first_name}</td>
<td>{this.props.obj.Last_name}</td>
<td>{this.props.obj.email}</td>
<td>{this.props.obj.mobile}</td>
<td>
<Link className="edit-link" to={"/edit-contact/" + this.props.obj._id}>
Edit
</Link>
<Button onClick={this.deleteContact} size="sm" variant="danger">Delete</Button>
</td>
</tr>
);
}
}
, когда я пытаюсь связать свой файл удаления контакта с моим app.jsfile, я получаю это сообщение в браузере
C:/Users/seanv/node_modules/@restart/context/forwardRef.js
Module not found: Can't resolve 'react' in 'C:\Users\seanv\node_modules\@restart\context'