我如何访问组件字段-React JS

Question

我从'react-select'导入的下拉菜单组件几乎没有问题，我是React的新手，因此我很难解决这个问题。我只想从下拉列表中选择用户，我该怎么做？

例如，这是下拉列表组件：

import React from 'react';
import Select from 'react-select';
import 'bootstrap/dist/css/bootstrap.min.css';

const techCompanies = [
  { label: "Button", value: 1 },
  { label: "CheckBox", value: 2 },
  { label: "Color", value: 3 },
  { label: "Date", value: 4 },
  { label: "Local Date time", value: 5 },
  { label: "Email", value: 6 },
  { label: "File", value: 7 },
  { label: "Hidden", value: 8 },
  { label: "Image", value: 9 },
  { label: "Month", value: 10 },
  { label: "Number", value: 11},
  { label: "Password", value: 12},
  { label: "Radio", value: 13},
  { label: "Range", value: 14},
  { label: "Reset", value: 15},
  { label: "Search", value: 16},
  { label: "Submit", value: 17},
  { label: "Telephone", value: 18},
  { label: "Text", value: 19},
  { label: "Time", value: 20},
  { label: "URL", value: 21},
  { label: "Week", value: 22},
];
class DropDown extends React.Component{
    render(){
    return(
  <div className="container">
    <div className="row">
      <div className="col-md-4"></div>
      <div className="col-md-4">
        <Select 
      options={ techCompanies } />
      </div>
      <div className="col-md-4"></div>
    </div>
  </div>
);
}
}
export default DropDown

现在我想在App.js上使用我的下拉菜单，并在<h1>{userSelect}</h1>中显示用户选择，无论如何我都找不到使用pros ans状态，所以我被卡在这里：

class App extends Component {
  render() {
    return(
    <div>
    <DropDown/>
    </div>

  );
}
}

感谢您的帮助

Answer 1

您必须提供下拉菜单更改状态的方法。 react-select提供了一种称为onChange的方法，该方法在每次选择新元素时都会触发选定元素。为此，您需要跟踪应用程序组件中当前选定的用户输入，并且需要将函数向下传递给DropDown，以便只要选择了新的dropdown元素，App便可以更改状态。您可以将代码更新为以下内容以实现此目的：

// DropDown.jsx
class DropDown extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-md-4" />
          <div className="col-md-4">
            <Select options={techCompanies} onChange={this.props.onChange} /> // add the onChange prop passed from app into Select's onChange API method
          </div>
          <div className="col-md-4" />
        </div>
      </div>
    );
  }
}
export default DropDown;

// App.jsx

import React, { Component } from "react";
import DropDown from "./DropDown";
import "./styles.css";

class App extends Component {
  // you'll need to keep track of the currently selected input
  state = {
    userSelected: ""
  };

  setSelected = selected => {
    console.log(selected) // ex: { label: "Button", value: 1 }
    this.setState({ userSelected: selected.label });
  };

  render() {
    return (
      <div>
        <h1>{this.state.selected}</h1>
        <DropDown onChange={this.setSelected} /> // pass your onChange handler
      </div>
    );
  }
}

export default App;

Answer 2

就像@Keith所说的那样，传递一个prop处理程序，该处理程序更新父级（App）的状态，并在子级（DropDown）中的选择更改时执行该状态。 React-Select在选择更改时返回一个对象，因此您必须提取出label-value对。

我在这里使用React Hooks，因为钩子很棒：）

---

DropDown.js组件

import React from "react";
import Select from "react-select";
import "bootstrap/dist/css/bootstrap.min.css";

const techCompanies = [
  { label: "Button", value: 1 },
  { label: "CheckBox", value: 2 },
  { label: "Color", value: 3 },
  { label: "Date", value: 4 },
  { label: "Local Date time", value: 5 },
  { label: "Email", value: 6 },
  { label: "File", value: 7 },
  { label: "Hidden", value: 8 },
  { label: "Image", value: 9 },
  { label: "Month", value: 10 },
  { label: "Number", value: 11 },
  { label: "Password", value: 12 },
  { label: "Radio", value: 13 },
  { label: "Range", value: 14 },
  { label: "Reset", value: 15 },
  { label: "Search", value: 16 },
  { label: "Submit", value: 17 },
  { label: "Telephone", value: 18 },
  { label: "Text", value: 19 },
  { label: "Time", value: 20 },
  { label: "URL", value: 21 },
  { label: "Week", value: 22 }
];

const DropDown = ({ handleSelectionChange }) => {
  // Handler to track changes on selection
  const handleChange = () => selectedValue => {
    handleSelectionChange(selectedValue); // 2. Note that the selectedValue is in the curried param.
  };

  return (
    <div className="container">
      <div className="row">
        <div className="col-md-4" />
        <div className="col-md-4">
          <Select
            options={techCompanies}
            onChange={handleChange()} // 1. make a call to the handler here
          />
        </div>
        <div className="col-md-4" />
      </div>
    </div>
  );
};

export default DropDown;

1. 当选择更改时，调用子DropDown处理程序handleChange()。不要忘记括号。
2. 捕获curried值，并通过调用道具handleSelectionChange将其传递给父对象

---

App.js组件

import React, { useState } from "react";

import DropDown from "./DropDown";

const App = () => {
  const [userSelect, setUserSelect] = useState({});

  const handleChange = selectedValue => {
    // 3. Finally Capture the value from the DropDown here and update the state
    setUserSelect(() => setUserSelect(selectedValue));
  };

  // 4. Extract out the value from the state
  const { label, value } = userSelect;

  return (
    <div className="App">
      {userSelect.value && <h1>{`${value} : ${label}`}</h1>}
      <DropDown handleSelectionChange={handleChange} />
    </div>
  );
}

export default App;

3. App's handleChange函数通过DropDown道具从handleChange上的handleSelectionChange接收值对象，并使用它来更新自己的状态。

4. 注意，React-Select将选定的值存储为{标签：值}对，因此您需要提取所需的值以在UI中显示。

签出Live Sandbox