Question

您好我有组件：

DropDownList状态：

 this.state = {
    selectValue: 1
};

使用州的标签组件：

 this.state = {
   selectValueInDropDown: 1
};

Tabs和DropDownList在一个组件页面中。

如何通过组件selectValue将状态DropDownList从Tab传递到Page组件？

Answer 1

您可以将状态“提升”到一个父组件，该组件将数据保持在其状态，并将数据作为props传递给子组件。

在这个例子中我们有

包含<App/>

state

接受道具的子组件<Select /> options显示下拉选项列表onChange 要通知有关更改选项和传递事件的事件向上selected道具以确定选择了哪个选项
仅显示所选选项的<Tab/>组件

App将管理两个孩子的状态，因为他们拥有共同状态的一部分（选定的option）。

代码：

const Select = ({ selected, options, onChange }) => {
  return (
    <select onChange={onChange}>
      {options.map(o => (
        <option value={o} selected={o == selected}>
          {o}
        </option>
      ))}
    </select>
  );
};

const Tab = ({ selected }) => {
  return (
    <div>
      <h3>The selected value is: {selected}</h3>
    </div>
  );
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: "",
      optionList: [1, 2, 3, 4]
    };

    this.onOptionChange = this.onOptionChange.bind(this);
  }

  onOptionChange(e) {
    this.setState({ selectedOption: e.target.value });
  }

  render() {
    const { selectedOption, optionList } = this.state;
    return (
      <div>
        <Tab selected={selectedOption} />
        <Select
          onChange={this.onOptionChange}
          selected={selectedOption}
          options={optionList}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

传递组件中的数据

1 个答案: