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

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

如果我理解正确，您可以将 UploadView.js 中名为 setMappingType 的函数（或方法）发送到 FileDropDown.js 。在方法 pickedOption 中选择 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>
    )
}

我希望它有所帮助;）

组件之间的反应

2 个答案: