javascript - react 组件之间的交互

我有一个父组件，如下所示

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

最佳答案

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

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

this.props.mappingType = value;

进入

this.props.mappingType(value);

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

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

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

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

希望对您有所帮助；）

关于javascript - react 组件之间的交互，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35419847/