javascript - 所有图像都会被删除，而不是在reactjs中单击删除图标的特定图像

Question

在我的租金详细信息编辑页面中，有一个图像上传功能，供用户更新其图像或删除以前上传的图像，这些图像是从 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@gmail.com',
  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 组件中的部分。

Answer 1

这里的问题是，您尝试通过将来自 Prop (previousFile)的图像设置为本地状态来删除它们。如果您从本地状态渲染图像，那么这种方法是可行的，但您所做的是直接从 props 渲染，这将导致 React 看不到任何变化。要使图像删除起作用，您需要将删除逻辑移至父组件，并为子组件提供触发删除的函数。

class Parent extends Component {
  constructor() {
    this.state = {
      files: []
    };
  }

  handleRemove(id) {
    const files = this.state.files.slice();
    this.seState({
      files: files.splice(id, 1)
    });
  }

  render() {
      return <Files files={this.state.files} onRemove={this.handleRemove.bind(this)} />;
    }
}

function handleClick(id, props) {
  props.handleRemove(id);
}

function Files(props) {
    return (
      <ul>
        {props.files.map(
         (file, key) => <li key={key} onClick={handleClick.bind(this, key, props)}>{file.name}</li>
        )}
      </ul>
    );
}