反应的组分

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的专家，但根据我的理解，这是如何完成的。希望这可以帮助。