反應的組分

Question

我有一個類似如下

UploadView.js

getInitialState: function() { 
     return { 
      file: null, 
      mappingType: null 
     } 
    }, 

    setMappingType: function(){ 
     this.setState({ 
      mappingType: this.state.mappingType 
     }); 
    }, 

    render: function(){ 
     <FileDropdown mappingType={this.setMappingType}/> 
     <FileUpload mappingType={this.state.mappingType}/> 
    } 

FileDropDown是一個子組件向用戶呈現下拉功能和外觀作爲父組件之間的交互以下

FileDropDown.js

pickedOption: function(event){ 
     var option = event.nativeEvent.target.selectedIndex; 
     var value = event.nativeEvent.target[option].text; 
     this.props.mappingType = value; 
    }, 

    render: function(){ 
     return (
      <select name="typeoptions" id="mappingTypes" onChange={this.pickedOption}>.....</select> 
     ) 
    } 

我想明白了，如果以正確的方式上面更新狀態，並會更新/設置在FileDropDown值this.props.mappinType將更新後的值設定在狀態mappingType父UploadView

Answer 1

如果我理解正確的話，你將某個函數（或方法）稱爲setMappingType從UploadView.js到FileDropDown.js。當在中選擇一個選項時，FileDropDown.js的方法是，選擇您將調用此函數，導致父組件更新。

而不是這樣做，你實際上分配給道具的價值。換句話說，改變這種

this.props.mappingType = value; 

到

this.props.mappingType(value); 

然後setMappingType改變方法，這實際上接收到這個值

setMappingType: function(value){ 
    this.setState({ 
     mappingType: value 
    }); 
}, 

---

哦，別的東西的功能，與您的問題無關，您可以使用r檢索您的值EFS像這樣：

pickedOption: function(event){ 
    var value = this.refs._myRef.value; 
}, 

render: function(){ 
    return (
     <select ref='_myRef' onChange={this.pickedOption}> 
     <option value='1'>One</option> 
     <option value='2'>Two</option> 
     </select> 
    ) 
} 

我希望它能幫助;）

Answer 2

簡短的回答，不，它不會以這種方式工作。
你需要改變你的setMappingType功能：

setMappingType: function(value){ 
    this.setState({ 
     mappingType: value 
    }); 
}, 

正如你現在擁有它，它只會總是因爲你的狀態變量mappingType設置狀態變量mappingType是的值設置爲null最初爲空。所以它會保持這種狀態。

的值傳遞給父功能，正確的方法是這樣的：

pickedOption: function(event){ 
    var option = event.nativeEvent.target.selectedIndex; 
    var value = event.nativeEvent.target[option].text; 
    this.props.mappingType(value); 
}, 

賦值爲你，將無法正常工作。
我會承認我不是React的專家，但根據我的理解，這是如何完成的。希望這可以幫助。