我怎样才能访问组件字段 - 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> 中显示用户选择，无论如何我找不到使用 pro ans 状态所以我被困在这里：

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

  );
}
}

感谢您的帮助

Answer 1

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

// 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）的状态并在子级（App）的选择更改时执行它（ 下拉菜单)。 React-Select returns 对象选择发生变化，因此您必须提取出 label-value 对。

我在这里使用 React Hooks，因为 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;

选择更改时调用子 DropDown 处理程序 handleChange()。不要忘记括号。
捕获 curried 值并通过调用 prop 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;

App's handleChange 函数通过 handleSelectionChange 属性从 handleChange 上的 DropDown 接收值对象并将其用于更新自己的状态。
请注意，React-Select 将选定的值存储为 { label: value } 对，因此您需要提取所需的值以显示在 UI 中。

查看 Live Sandbox

我怎样才能访问组件字段 - React JS

How can i get access to component fields - React JS

reactjs

react-select

DropDown.js分量

App.js分量