मेरे पास एक बटन है जो किसी ऑब्जेक्ट से एक फोटो को हटा देता है जिसमें एकाधिक फोटो होते हैं:

<button class="btn" onClick={()=> this.removePhoto(index)}>remove</button>

किसी कारण से removePhoto फ़ंक्शन चलने के बाद यह ऑनसबमिट फ़ंक्शन पर जारी रहता है। केवल एक चीज जो मैं सोच सकता हूं कि इसका कारण बंधन हो सकता है, लेकिन मैं अभी भी प्रतिक्रिया करने के लिए बिल्कुल नया हूं इसलिए मुझे यकीन नहीं है कि इसे कैसे ठीक किया जाए।

export default class Edit extends Component {
  constructor() {
    super();
    this.state = {
        id: '',
        title: '',
        description: '',
        photos: [], 
        categories: [],
        selectedFile: '',
        selectedFiles: '',
        photo: '',
        tags: [],
        tagName: '',
    };  
    this.removePhoto = this.removePhoto.bind(this);
   }
   
 
  onSubmit = (event) => {
    event.preventDefault(); 
    const photoCatUpdate = this.state.photos.map((obj, index) => {  
      obj.tag = this.state.tagName
      return obj
    });

    const photos = JSON.stringify(photoCatUpdate)
    let body = {
        title: this.state.title,
        description : this.state.description,
        photos: photos,
        tags: this.state.tagName
    }
    let id = this.state.id

    fetch('/api/categories/' + id, {
      method: 'put',
      body: JSON.stringify(body),
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(res => {
      if (res.status === 200) {
          console.log("WORKED!!")
          this.props.closeModal()
          this.props.getCategory()
       
      } else {
        const error = new Error(res.error);
        throw error;
      }
    })
  }

        addPhoto = () => {
          const photosNew = this.state.photos
          const photo = this.state.photo
          photosNew.push({
            photo: photo,
            title: '',
            thumbnail: false,
            image1: false,
            image2: false,
            tag: '',
          });
          this.setState({photos: photosNew});
          this.setState({photo: '', selectedFile: '', selectedFiles: ''})
          document.getElementById("myFile").value = "";
        }
         
  removePhoto = (i) => {
    debugger
    const photos = this.state.photos
    const objIndex = photos.filter((obj, index) => {
      if(index != i){
        return obj
      }
    });

    console.log("objIndex", objIndex)

    this.setState({photos: objIndex})
    
  }
   
  updatePhotoObj = (event) => {
    const { value, id } = event.target;
    console.log("value", value)
    console.log("event.target", event.target)
    
    const objIndex = this.state.photos.map((obj, index) => {
      if(index == id){
        obj.title = value
      }
      return obj
    });

    this.setState({photos: objIndex})

  }
  handleInputChangeRadio = (event) => {
    const { name, id} = event.target;
    console.log("GET HERE!", name)
    console.log("GET HERE!", id)
    const objIndex = this.state.photos.map((obj, index) => {
      if(index == id){
        obj.thumbnail = true
      }else{
        obj.thumbnail = false
      }
      return obj
    });

    this.setState({photos: objIndex})
  }
  handleInputChangeOne = (event) => {
    const { name, id} = event.target;
    console.log("GET HERE!", name)
    console.log("GET HERE!", id)
    const objIndex = this.state.photos.map((obj, index) => {
      if(index == id){
        obj.image1 = true
      }else{
        obj.image1 = false
      }
      return obj
    });

    this.setState({photos: objIndex})
  }
  handleInputChangeTwo = (event) => {
    const { name, id} = event.target;
    console.log("GET HERE!", name)
    console.log("GET HERE!", id)
    const objIndex = this.state.photos.map((obj, index) => {
      if(index == id){
        obj.image2 = true
      }else{
        obj.image2 = false
      }
      return obj
    });

    this.setState({photos: objIndex})
  }
   
  render() {
    const table = {
      width: '100%',
      paddingTop: '20px'
     }
   
    return (
      <> 
     

     <div class="col-md-12">  
    <form onSubmit={this.onSubmit}>
    <div class="form-group">
    <label>Title</label>
     <input
           class="form-control" 
           type="text"
          name="title"
          placeholder="Enter title"
          value={this.state.title}
          onChange={this.handleInputChange}
        />
        </div>
        
        <div class="form-group">
    <label>Description</label>
     <textarea
           class="form-control" 
           type="text"
           rows="10" 
          name="description"
          placeholder="Enter title"
          value={this.state.description}
          onChange={this.handleInputChange}
        />
        </div>

        <div class="form-group">
        <label for="inputTag">Tag</label>
        <select id="inputTag" class="form-control"
                        value={this.state.tagName}
                        name="tagName"
                        onChange={this.handleInputChange}
                        >
                           <option  value="" disabled selected>Please Choose...</option>
                        {this.state.tags.map(s =>  
                            <option selected>{s.name}</option>
                        )}
                        </select>
        </div>
        <div class="form-row">
        <label>New Photo</label>
        </div>
        <div class="form-row">
       <input type="file" id="myFile" onChange={this.singleFileChangedHandler}/>   
          <button className="btn btn-secondary" onClick={this.singleFileUploadHandler}>Add Photo</button>
          </div>
      
        <div class="form-row">
        {this.state.photos.length > 0 ?
          <div style={table}>
         
          <div class="table-responsive-sm">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">photos</th>
                                    <th scope="col"></th>
                  <th scope="col"></th>
                  <th scope="col"></th>
                  <th scope="col"></th>
                                
                                </tr>
                            </thead>
                            <tbody>
                            
                {this.state.photos.map((x, index) => {
                return (
                  <>
                  <tr>
                        <td > <img src={x.photo} alt=""/></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td> 
                          <button class="btn" onClick={()=> this.removePhoto(index)}>remove</button>
                          <div class="form-check">
                            <input 
                            class="form-check-input" 
                            type="radio" name="thumb" id={index} 
                            name="thumb"
                            checked={x.thumbnail}
                            onChange={this.handleInputChangeRadio}
                            />
                            <label class="form-check-label" for="thumb">
                              Thumbnail
                            </label>
                          </div>
                          <div class="form-check">
                            <input 
                            class="form-check-input" 
                            type="radio" name="one" id={index} 
                            name="one"
                            checked={x.image1}
                            onChange={this.handleInputChangeOne}
                            />
                            <label class="form-check-label" for="one">
                              Image 1
                            </label>
                          </div>
                          <div class="form-check">
                            <input 
                            class="form-check-input" 
                            type="radio" name="two" id={index} 
                            name="two"
                            checked={x.image2}
                            onChange={this.handleInputChangeTwo}
                            />
                            <label class="form-check-label" for="two">
                              Image 2
                            </label>
                          </div>
                        </td>
                       
                      </tr>
                       <tr>
                      <input
                   class="form-control" 
                   type="text"
                   value={x.title}
                   id={index}
                   onChange={this.updatePhotoObj}
                 />
                 </tr>
              </>
                );
                
              })}
                
                            </tbody>
                        </table>
                    </div>
          </div>
        :
        null
     
      
      }
      
       </div>
     
        <div class="modal-footer"> 
       <input type="submit" value="Submit" class="btn btn-primary"/>
       <button type="button" class="btn btn-secondary" data-dismiss="modal" onClick={this.handleClose}>Close</button>
       </div>
      </form> 
      </div>
    
      </>
      );
    
    }
  }
0
Kris 13 अक्टूबर 2020, 17:35

2 जवाब

सबसे बढ़िया उत्तर

सबसे महत्वपूर्ण बात यह है कि आपको बटन में टाइप जोड़ना होगा

 <button type="button" class="btn" onClick={()=> this.removePhoto(index)}>remove</button>

फ़ॉर्म के अंदर बिना प्रकार के बटन डिफ़ॉल्ट रूप से type="submit" होते हैं, इसलिए जब आप उस पर क्लिक करते हैं, तो वह फ़ॉर्म सबमिट कर देगा

मुझे लगता है कि सरणी को फ़िल्टर करने का बेहतर तरीका है

const filterdPhotos = photos.filter((obj, index) => {
    return index != i;
});

this.setState({photos: filterdPhotos})
2
Kalhan.Toress 13 अक्टूबर 2020, 17:45

आपके सबमिट पर को ट्रिगर करने का कारण यह है कि आपके पास बटन एक फ़ॉर्म के अंदर है, जिसमें कोई निर्दिष्ट प्रकार नहीं है।

मेरा मानना ​​है कि यदि आप ब्राउज़र को मानने से रोकने के लिए केवल type="button" घोषित करते हैं, तो यह एक सबमिट बटन है, तो आपको जाने के लिए अच्छा होना चाहिए।

तो आप चाहेंगे:

<button class="btn" type="button" onClick={()=> this.removePhoto(index)}>remove</button>
2
Nick 13 अक्टूबर 2020, 17:42