Как я могу получить доступ к полям компонента - React JS

Question

У меня небольшая проблема с моим выпадающим компонентом, который я импортировал из'act-select ', я новичок ie в React, так что мне довольно трудно решить эту проблему. я просто хочу получить выбор пользователя из выпадающего списка, как я могу это сделать?

например, это компонент Dropdown:

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

и теперь я хочу использовать свой выпадающий список в приложении. js и покажите в <h1>{userSelect}</h1> выбор пользователя, я не могу найти в любом случае, чтобы использовать состояние плюсов и ответов, поэтому я застрял здесь:

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

  );
}
}

Спасибо за помощь

Answer 1

Как сказал @Keith, передайте обработчик prop, который обновляет состояние родительского элемента ( App ) и выполняет его при изменении выбора в дочернем элементе ( DropDown ) , React-Select возвращает объект при изменении выделения, так что вам нужно было бы извлечь пару label-value.

Я использую здесь React Hooks, потому что ловушки удивительны:)

---

DropDown. js component

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. Захватите значение curry и передайте его родителю, вызвав команду prop handleSelectionChange

---

. 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 сохраняет выбранные значения в виде пары {label: value}, поэтому вам необходимо извлечь необходимое значение для отображения в пользовательском интерфейсе.

Извлечь Live Sandbox

Answer 2

Вы должны предоставить способ, чтобы раскрывающийся список изменил состояние. response-select предоставляет метод с именем onChange, который запускает выбранный элемент каждый раз, когда выбирается новый элемент. Для этого вам нужно будет отслеживать текущий выбранный пользовательский ввод в компоненте приложения и передавать функцию в DropDown, чтобы приложение могло изменять состояние всякий раз, когда выбирается новый выпадающий элемент. Вы можете обновить свой код до следующего:

// 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;