我怎樣才能讓這個動態表單起作用？

Question

我一直在試圖讓我的動態表單在我的Meteor React應用程序中工作。

這是所有工作按照要求之前，我開始添加這個，但現在我不能得到它的工作。我得到一個「Uncaught TypeError：無法設置未定義的屬性'0'錯誤。這點到這條線：

{this.state.inputs.map((input, idx) => <input

這是我整個的代碼，我知道這是一個有點亂，所以任何反饋意見表示高度讚賞：

import React, { Component } from 'react'; 
 
import { Row, Col, Checkbox, Radio, ControlLabel, HelpBlock, FormGroup, FormControl, Button, Tabs, Tab } from 'react-bootstrap'; 
 
import { Bert } from 'meteor/themeteorchef:bert'; 
 
import { insertComment } from '../../../api/comments/methods'; 
 
import ReactQuill from 'react-quill'; 
 

 
var s3Url = null; 
 

 
export default class AddSparkShanghai extends Component { 
 
    constructor(props) { 
 
    super(props); 
 

 
    this.createSpark = this.createSpark.bind(this); 
 
    this.onChange = this.onChange.bind(this); 
 

 
    this.state ={ 
 
     inputs: ['input-0'], 
 
     city: '', 
 
     person: '', 
 
     location: '', 
 
     title: '', 
 
     content: [], 
 
     mediaUrls: [], 
 
    }; 
 
    } 
 

 
componentWillMount(){ 
 
    // we create this rule both on client and server 
 
    Slingshot.fileRestrictions("myFileUploads", { 
 
     allowedFileTypes: ["image/png", "image/jpeg", "image/gif"], 
 
     maxSize: 10 * 1024 * 1024 // 10 MB (use null for unlimited) 
 
    }); 
 
    } 
 

 
    upload(file){ 
 
    var uploader = new Slingshot.Upload("myFileUploads"); 
 

 
    uploader.send(document.getElementById('input').files[0], function (error, downloadUrl) { 
 
     if (error) { 
 
     // Log service detailed response 
 
     alert (error); 
 
     } 
 
     else { 
 
     s3Url = encodeURI(downloadUrl); 
 
     Bert.alert('File uploaded!', 'success'); 
 
     Meteor.users.update(Meteor.userId(), {$push: {"profile.files": downloadUrl}}); 
 
     } 
 
    }); 
 
    } 
 

 
    createSpark(event) { 
 
    event.preventDefault(); 
 
    var formData = $('#form').serializeArray() 
 
    console.log(formData); 
 
    var mediaArray = []; 
 
    if (this.mediaUrls.value == 0) { 
 
    mediaArray = []; 
 
    } else { 
 
    mediaArray.push(encodeURI(this.mediaUrls.value)); 
 
    console.log(this.mediaUrl.value); 
 
    console.log(mediaArray); 
 
    } 
 

 
    const city = 'Shanghai'; 
 
    const person = this.person.value; 
 
    const location = this.location.value; 
 
    const title = this.title.value; 
 
    const content = this.state.content; 
 
    const fileLink = s3Url; 
 
    const timestamp = parseInt(this.props.timestamp); 
 
    const mediaUrls = mediaArray; 
 
    const approved = true; 
 
    const adminSpark = true; 
 
    const createdBy = Meteor.userId(); 
 

 

 
    insertComment.call({ 
 
    city, person, location, title, content, fileLink, timestamp, approved, adminSpark, createdBy, mediaUrl, 
 
    }, (error) => { 
 
     if (error) { 
 
      Bert.alert(error.reason, 'danger'); 
 
     } else { 
 
      
 
      Bert.alert('Spark added!', 'success'); 
 
     } 
 
    }); 
 
    } 
 

 
    onChange(html) { 
 
    this.setState ({ content: html }); 
 
    } 
 

 
    appendInput() { 
 
    var newInput = `input-${this.state.inputs.length}`; 
 
    console.log (newInput); 
 
    this.setState({ inputs: this.state.inputs.concat([newInput]) }); 
 
    } 
 

 

 
    render() { 
 
    const events = { 
 
     'text-change': delta => { 
 
     } 
 
    }  
 

 
    return (
 
     <div className="background-container"> 
 
     <form ref={(input) => this.sparkForm = input} onSubmit={(e) => this.createSpark(e)}> 
 
     
 
      <ControlLabel>Select your person (optional)</ControlLabel> 
 
      <select id="formControlsPerson" placeholder="Choose your person" className="form-control" ref={(input) => this.person = input}> 
 
       <option value='select'>Select your person</option> 
 
       <option value='jane'>Jane Siesta</option> 
 
       <option value='ben'>Ben Huang</option> 
 
       <option value='han'>Han Han</option> 
 
       <option value='mau'>Mau Mau</option> 
 
       <option value='void'>VOID</option> 
 
       <option value='tommy'>Tommy Hendriks</option> 
 
       <option value='gareth'>Gareth Williams</option> 
 
       <option value='gigi'>Gigi Lee</option> 
 
      </select> 
 
    
 
      <ControlLabel>Select your location (optional)</ControlLabel> 
 
      <select id="formControlsLocation" placeholder="Choose your location" className="form-control" ref={(input) => this.location = input}> 
 
       <option value='select'>Select your location</option> 
 
       <option value='shelter'>Shelter</option> 
 
       <option value='mansion'>The Mansion</option> 
 
      </select> 
 

 
      <ControlLabel>Title</ControlLabel> 
 
      <input type="text" label="Title" placeholder="Enter your title" className="form-control" ref={(input) => this.title = input}/> 
 
      
 
      <ControlLabel>Add Image</ControlLabel> 
 
      <div className="upload-area"> 
 
       <p className="alert alert-success text-center"> 
 
       <span>Click or Drag an Image Here to Upload</span> 
 
       <input type="file" id="input" className="file_bag" onChange={this.upload} /> 
 
       </p> 
 
      </div> 
 

 
      <ControlLabel>Content</ControlLabel> 
 
       <div className='_quill'> 
 
       <ReactQuill 
 
        toolbar={false} 
 
        theme="snow" 
 
        ref='editor' 
 
        onChange={this.onChange} 
 
        events={events} /> 
 
       </div> 
 
       <br /> 
 

 
      <ControlLabel>Media (optional)</ControlLabel> 
 
      <div id="dynamicInput"> 
 
      {this.state.inputs.map((input, idx) => <input 
 
       key={ input } 
 
       type="text" 
 
       label="Media" 
 
       placeholder="Add your media url" 
 
       className="form-control" 
 
       ref={(input) => this.mediaUrls[idx] = input}/>)}  
 
      </div> 
 
      <Button onClick={() => this.appendInput() }> 
 
      Add media field 
 
      </Button> 
 

 

 

 
     <ControlLabel>Media (optional)</ControlLabel> 
 
      <div id="dynamicInput"> 
 
      {this.state.inputs.map(input => <input key={input} type="text" label="Media" placeholder="Add your media url" className="form-control" ref={(input) => this.mediaUrl = input}/>)} 
 
      </div> 
 
      <Button onClick={() => this.appendInput() }> 
 
      Add media field 
 
      </Button> 
 

 

 
      
 
    
 
      <Button type="submit" data-dismiss="modal">Submit</Button> 
 
     </form> 
 
     </div> 
 
)} 
 
}

Answer 1

我猜這個問題是這樣的：ref={(input) => this.mediaUrls[idx] = input}/>)}，看起來像是價值this.mediaUrls是undefined