0
私の賃貸内容の詳細編集ページには、画像を更新したり、以前にアップロードした画像を取り除くための画像アップロードがあります。previousFile（）さらに画像を追加することができます。さらに追加された画像は、onDrop（）およびshowFiles（）から表示されます。私は画像を削除するためにhandleRemove（）を定義しましたが、正しく動作していません。削除したい特定の画像の代わりに、すべての画像が削除されます。この理由は何でしょうか？削除アイコンがクリックされた特定の画像の代わりに、すべての画像が削除されます
コードは
export default class RoomDetail extends Component{
constructor(props){
super(props);
this.state = { rooms:[], isEditing:false };
this.pk = this.props.data.pk;
}
componentDidMount(newUser){
$.ajax({
url:'/api/rentals/'+this.props.data.pk+'/',
type:'put',
contentType: "application/json",
data:JSON.stringify(newUser),
success: (data) => {
console.log('data',data);
},
error: (xhr, status, err) => {
console.error(xhr, status, err.toString());
}
});
}
componentWillMount(){
this.loadRoomFromServer();
}
loadRoomFromServer(){
$.ajax({
url:'/api/rentals/'+this.props.data.pk,
dataType:'json',
success: (data) => {
console.log('data',data);
this.setState({rooms: data});
},
error: (xhr, status, err) => {
console.error(xhr, status, err.toString());
}
});
}
handleRemove(id){
const files = this.state.rooms.gallery.slice();
this.setState({rooms:files.splice(id,1)});
}
renderRoomDetailSection(){
let url = this.pk;
let imageFile;
let firstImage;
if(this.state.rooms.gallery){
firstImage = this.state.rooms.gallery[0].image;
console.log('firstImage', firstImage);
imageFile = _.map(this.state.rooms.gallery, (image) => {
return(
<div className="col-md-3">
<img src={image.image} key={image.id} className="img-fluid img-rounded" />
</div>
);
});
}
if (this.state.isEditing){
return(
<EditRent
ownerName={this.state.rooms.ownerName}
email = {this.state.rooms.email}
phoneNumber = {this.state.rooms.phoneNumber}
image = {this.state.rooms.gallery}
onRemove = {this.handleRemove.bind(this)}
pk={this.props.data.pk} />
)
}
return(
<div className="detailListing">
here is the rent details
</div>
)
}
renderUserAction(){
if (this.state.isEditing){
return(
save and cancel button is here
);
}
return(
<div className = "buttons">
edit button is here
</div>
);
}
render() {
return (
<div className = "newRoomDetail" >
{ this.renderRoomDetailSection() }
{ this.renderUserAction() }
</div>
);
}
}
var fieldValues = {
ownerName:'name',
email:'[email protected]',
phoneNumber:'9842333333'
}
class EditRent extends React.Component{
constructor(props,context) {
super(props,context);
this.state = {
step: 1
};
this.pk = this.props.pk;
}
saveValues(field_value) {
return function() {
fieldValues = Object.assign({}, fieldValues, field_value)
}()
}
nextStep(step) {
var step = this.state.step;
var newStep = step+1;
this.setState({step:newStep});
}
previousStep(step) {
var step = this.state.step;
var newStep = step-1
this.setState({
step : newStep
});
}
showStep() {
switch (this.state.step) {
case 1:
return <RenderPersonalInfo fieldValues={fieldValues}
ownerName={this.props.ownerName}
email={this.props.email}
phoneNumber={this.props.phoneNumber}
nextStep={this.nextStep.bind(this)}
previousStep={this.previousStep.bind(this)}
saveValues={this.saveValues.bind(this)} />
case 2:
return <RenderPhotos fieldValues={fieldValues}
image={this.props.image}
nextStep={this.nextStep.bind(this)}
previousStep={this.previousStep.bind(this)}
imageRemove={this.props.onRemove}
pk={this.props.pk} />
}
}
render() {
return (
<main className="container">
<div className="row">
<div className="col-sm-12">
<span className="progress-step">Step {this.state.step}</span>
</div>
</div>
<div className="container">
<div className="row">
{this.showStep()}
</div>
</div>
</main>
)
}
};
let image = [];
class RenderPhotos extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
files: []
};
}
handleClick(image){
this.props.imageRemove(image);
}
onDrop(files) {
console.log('Received files: ', files);
this.setState({
files: files
});
image = new FormData(files);
$.each(files,function(i,file){
image.append('image',file);
});
}
previousFile(){
return(
<ul className="gallery">
{
_.map(this.props.image, (image,idx) => {
return(
<li className="col-md-3" key={idx}>
<span className="remove"><i onClick= onClick= {this.handleClick.bind(this,image)} className = "fa fa-times" aria-hidden="true"></i></span>
<img src={image.image} key={image.id} className="img-fluid img-rounded" />
</li>
)
})
}
</ul>
)
}
showFiles() {
const { files } = this.state;
if (!files.length) {
return null;
}
return (
<div>
<h3>Dropped files: </h3>
<ul className="gallery">
{
_.map(files, (file, idx) => {
return (
<li className="col-md-3" key={idx}>
<img src={file.preview} width={200}/>
<div>{file.name}</div>
</li>
)
})
}
</ul>
</div>
);
}
render() {
return (
<div>
<div className="col-md-12">
<form method="POST" encType="multipart/form-data">
<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}"/>
<Dropzone onDrop={this.onDrop.bind(this)}
style={style}
activeStyle={activeStyle}
accept="image/*">
Try dropping some files here, or click to select files to upload.
</Dropzone>
</form>
{ this.previousFile() }
{ this.showFiles() }
</div>
<div className="row continueBtn text-right">
<button className="btn how-it-works pull-left" onClick={this.props.previousStep.bind(this)}><i className="fa fa-hand-o-left"></i></button>
<button className="btn how-it-works pull-right" onClick={this.nextStep.bind(this)}><i className="fa fa-floppy-o"></i></button>
</div>
</div>
);
}
}
を短くする部分を削除RenderPhotos成分です。
:) – pri