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

Question

very new to react. you can say I have not yet started to think like React. here is the problem:

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

In the dropdown, I select a value. Store it in state, as something as , currentLocation. Then I go to Panel, hit a button, and I want to open a modal. When i open a modal, I need to pass the currentLocation to that model. I can pass in arbitrary value to modal, but I cannot figure out a way to get the currently selected item from DropDown.

How do I get the value of the currently selected item to the Panel? Am I even making sense?

Answer 1

When you call the setState in the dropdown that will force an update of the page. Then if you call this.state in your component you should have the value you need there.

You should go over the basic tutorials to grasp the react basics.

But it goes like this:

     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

There is a lot of ambiguity in your question but I'll try for the simplest case.

You have a Panel component and a Dropdown component.

You want to the Panel to have access to a value that was set when the Dropdown was used.

Solution: When the Dropdown is actuated, it creates an Action that Stores the selected value.

When the modal button in the Panel is actuated, it creates an Action that requires the DropDownStore. Then it decides what to do based on that value.

The pattern I am loosely describing is known Facebook's Flux architecture which is basically just a more specific application architecture for React applications similar to pub/sub or an event bus.