javascript - React 组件之间的交互

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 的函数(或方法)从 UploadView.js 发送到 FileDropDown.js。当在 FileDropDown.js 中的 pickedOption 方法中选择一个选项时，您将调用此函数，从而导致父组件更新。

您实际上没有这样做，而是将值分配给了 props。换句话说，改变这个

this.props.mappingType = value;

进入

this.props.mappingType(value);

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

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

<小时/>

哦，还有其他与您的问题无关的事情，您可以使用像这样的引用检索您的值:

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

希望对您有帮助;)