如何使用Selection Selection和用户选择在Selection中更新状态？

Question

我正在尝试根据下拉菜单中的用户选择更新项目中的一个状态。

我从父组件中传递了两个状态(roomType和占用者)以及它们的setter/change函数(onRoomTypeChange & onOccupantsChange)。

我试着阅读，但是遇到了麻烦。

想知道是否有人能为我指明正确的方向。

import React from 'react';
import Select from 'react-select';

const roomOptions = [
  { value: 'Standard', label: 'Standard' },
  { value: 'Delux', label: 'Delux' }
];

const occupantOptions = [
  { value: 1, label: '1' },
  { value: 2, label: '2' },
  { value: 3, label: '3' },
  { value: 4, label: '4' },
];

const RoomDetails = (props) => {
  let {
    roomType,
    onRoomTypeChange,
    occupants,
    onOccupantsChange
  } = props;

  const handleChange = (e) => {
    onRoomTypeChange(e.target.value);
  };

  return (
    <div>
      <div className="form-group">
        <label className="select-label">Room Type: {roomType} </label>
        <Select
          // value={e.target.value}
          onChange={handleChange}
          options={roomOptions}
          theme={theme}
        />

        <label className="select-label">Guests: {occupants}</label>
        <Select
          value={occupants}
          onDatachange={onOccupantsChange}
          options={occupantOptions}
          theme={theme}
        />

      </div >
    </div>
  );
};

export default RoomDetails;

Answer 1

我解决了这个问题，并想发布一个更新：

我已经安装了一个名为“react-下拉-选择”的包，我从我的package.json中删除了它，我相信这是在干扰我的react select软件包。返回对象不是事件，而是相应选项数组中的选定对象。我在参数中取消了value属性的结构，并且只对值使用Setter函数。我最初在Select上包含了一个Value=属性，该属性被设置为当前状态值

 <Select
            value={stateProperty}
  /> 

当我删除Value属性时，bug就消失了。

(这是解决办法)

import React from 'react';
import Select from 'react-select';

const roomOptions = [
  { value: 'Standard', label: 'Standard' },
  { value: 'Delux', label: 'Delux' }
];

const occupantOptions = [
  { value: 1, label: '1' },
  { value: 2, label: '2' },
  { value: 3, label: '3' },
  { value: 4, label: '4' },
];


const RoomDetails = (props) => {
  let {
    onRoomTypeChange,
    onOccupantsChange
  } = props;

  const handleChangeRoom = ({ value }) => {
    console.log(value);
    onRoomTypeChange(value);
  };

  const handleChangeOccupants = ({ value }) => {
    console.log(value);
    onOccupantsChange(value);
  };

  return (
    <div>
      <div className="form-group mb-2">
        <span className="form-label mt-3">Room Type </span>

        <Select
          onChange={handleChangeRoom}
          options={roomOptions}
          theme={theme}
          placeholder="Room Type"
        />

        <span className="form-label mt-3">Guests</span>
        <Select
          onChange={handleChangeOccupants}
          options={occupantOptions}
          theme={theme}
          placeholder="Number of Guests"
        />
      </div >
    </div>
  );
};

export default RoomDetails;