反應選擇中的自定義 Output

Question

我使用 react-select 並且我是新手。我有一個名為 Example 的組件

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

class Example extends React.Component {
  state = {
    selectedOption: null
  };

  render() {
    const { onHandleChange, options } = this.props;
    return <Select onChange={onHandleChange} options={options} isMulti />;
  }
}

export default Example;

在另一個文件中，我們有一個功能組件

import React, { useState } from "react";
import Example from "./Example";
import { regionOptions, ageOptions, bordOptions } from "./Options";

export default function UserProfile() {
  const [selectedOption, setSelectedOption] = useState({
    region: "",
    age: "",
    bord: ""
  });

  const handleChange = (key, selectedOption) => {
    setSelectedOption(prev => ({ ...prev, [key]: selectedOption }));
  };
  console.log(Object.values(selectedOption));

  return (
    <div>
      <Example
        id="region"
        onHandleChange={value => handleChange("region", value)}
        selectedOption={selectedOption.region}
        options={regionOptions}
      />
      <Example
        id="age"
        onHandleChange={value => handleChange("age", value)}
        selectedOption={selectedOption.age}
        options={ageOptions}
      />
      <Example
        id="bord"
        onHandleChange={value => handleChange("bord", value)}
        selectedOption={selectedOption.bord}
        options={bordOptions}
      />
    </div>
  );
}

我通過 handChange 事件在控制台中顯示值。 But when the options increase, I can't say which one belongs to which.

我想要 console.log 而不是 [Array[n], Array[n], Array[n]]

將顯示類似這樣的內容 [Region[n], age[n],bord[n]]

你可以在這里看到我的代碼https://codesandbox.io/s/upbeat-night-tqsk7?file=/src/UserProfile.js:0-1040

Answer 1

只需使用

console.log(selectedOption);

代替

console.log(Object.values(selectedOption));

Answer 2

您可以做的是創建一個自定義掛鈎並進行以下更改。

// custom hook

    function useFormInput(initial) {
      const [value, setValue] = useState(initial);

      const handleOnChange = e => {
        setValue(e);
      };

      return {
        selectedOptions: value,
        onChange: handleOnChange
      };
    }

然后在代碼中

export default function UserProfile() {
  const region = useFormInput(""); // return { selectedOption, onChange }
  const age = useFormInput("");
  const bord = useFormInput("");

  // NB {...region}  pass deconstructed return values from custom hook to the component
  return (
    <div>
      <Example id="region" {...region} options={regionOptions} />
      <Example id="age" {...age} options={ageOptions} />
      <Example id="bord" {...bord} options={bordOptions} />
      {JSON.stringify(region.selectedOptions)}
      {JSON.stringify(age.selectedOptions)}
      {JSON.stringify(bord.selectedOptions)}
    </div>
  );
}

// your UI component

  render() {
    const { onChange, options } = this.props;
    return <Select onChange={onChange} options={options} isMulti />;
  }

工作示例

https://codesandbox.io/s/optimistic-napier-fx30b ？