反应组件之间的交互

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值， 则会在父级UploadView中将更新后的值设置为状态mappingType

Answer 1

简短的回答，不，这种方式行不通。
您需要将setMappingType函数更改为：

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

如您目前所拥有的，它将始终总是设置为null，因为您将状态变量mappingType设置为状态变量mappingType的值，该值最初为null。 因此，它将保持这种状态。

将值传递给父函数的正确方法是这样的：

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

按原样分配它，将不起作用。
我承认我不是React方面的专家，但据我了解，这是需要做的事情。 希望这可以帮助。

Answer 2

如果我理解正确，则可以将一个名为setMappingType的函数（或方法）从UploadView.js发送到FileDropDown.js 。 在方法pickOption的 FileDropDown.js中选择一个选项时，您将调用此函数，从而导致父组件更新。

您实际上没有将值分配给道具。 换句话说，改变这个

this.props.mappingType = value;

成

this.props.mappingType(value);

然后将方法setMappingType更改为实际接收该值的函数

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

---

哦，还有其他与您的问题无关的东西，您可以像这样使用ref检索您的值：

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>
    )
}

希望对您有所帮助；）