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>中显示用户选择，无论如何我都找不到使用专业状态的信息，所以我被卡在这里：

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 < / strong>）。 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;

选择更改时，调用子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函数通过DropDown道具从handleChange上的handleSelectionChange接收值对象，并使用它来更新自己的状态

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

检出Live Sandbox

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

2 个答案:

DropDown.js组件

App.js组件