Question

非常新的反应。你可以说我还没有像React那样开始思考。这是问题：

    <div>
    <DropDown>    </DropDown>
    <Panel>    </Panel>
    </div>

在下拉列表中，我选择一个值。将其存储在state，就像currentLocation一样。然后我去Panel，按一下按钮，我想打开一个模态。当我打开一个模态时，我需要将currentLocation传递给该模型。我可以将任意值传递给模态，但我无法找到从DropDown获取当前所选项的方法。

如何获取当前所选项目的值？我甚至有意义吗？

Answer 1

当你在下拉列表中调用setState时会强制更新页面。然后，如果您在组件中调用this.state，那么您应该拥有所需的值。

你应该仔细阅读基础教程来掌握反应基础知识。

但它是这样的：

     getInitialState: function() {
        return {
          myVar: ''
          //set your variables here
          //getInitialState will get called before the component gets mounted
        };
      },
     myCustomFunction: function(newVariable) {
        this.setState({
          myVar: newVariable
        });
      },
     render: function() {
        return (
          <div>
      <input
        onChange={this.myCustomFunction}
        />
      <MyCustomComponent myProp={this.state.myVar}/>
           //everytime the state changes MyCustomComponent will have that new value as a prop 
          </div>
        );
      }

Answer 2

你的问题有很多含糊之处，但我会尝试最简单的案例。

您有一个Panel组件和一个Dropdown组件。

您希望Panel能够访问使用Dropdown时设置的值。

解决方案：启动Dropdown时，它会创建一个存储所选值的Action。

当面板中的模态按钮被激活时，它会创建一个需要DropDownStore的Action。然后它根据该值决定做什么。

我所描述的模式是Facebook的Flux架构，它基本上只是一个类似于pub / sub或事件总线的React应用程序的更具体的应用程序架构。

React.JS，在组件之间传递数据

2 个答案: