如何使用 Hooks 在 React Sematic UI 中实现 AddAdiditions？

Question

我想在我的应用程序中有一个下拉列表，它允许用户向下拉列表中添加一个项目。我正在使用 React Sematic UI。 Sematic UI Dropdown ALlowAdditions

我是 React hooks 的新手，我想知道如何使用 hooks 实现 onChange 和 onAddition 函数。

import React, { Component } from 'react'
import { Dropdown } from 'semantic-ui-react'

const options = [
  { key: 'English', text: 'English', value: 'English' },
  { key: 'French', text: 'French', value: 'French' },
  { key: 'Spanish', text: 'Spanish', value: 'Spanish' },
  { key: 'German', text: 'German', value: 'German' },
  { key: 'Chinese', text: 'Chinese', value: 'Chinese' },
]

class DropdownExampleAllowAdditions extends Component {
  state = { options }

  handleAddition = (e, { value }) => {
    this.setState((prevState) => ({
      options: [{ text: value, value }, ...prevState.options],
    }))
  }

  handleChange = (e, { value }) => this.setState({ currentValue: value })

  render() {
    const { currentValue } = this.state

    return (
      <Dropdown
        options={this.state.options}
        placeholder='Choose Language'
        search
        selection
        fluid
        allowAdditions
        value={currentValue}
        onAddItem={this.handleAddition}
        onChange={this.handleChange}
      />
    )
  }
}

export default DropdownExampleAllowAdditions

如有任何帮助，我们将不胜感激。提前致谢:)

Answer 1

import React, { useState } from "react";
import { Dropdown } from "semantic-ui-react";

const options = [
  { key: "English", text: "English", value: "English" },
  { key: "French", text: "French", value: "French" },
  { key: "Spanish", text: "Spanish", value: "Spanish" },
  { key: "German", text: "German", value: "German" },
  { key: "Chinese", text: "Chinese", value: "Chinese" }
];

const DropDownWithHooks = () => {

  const [dropDownOptions, setDropDownOptions] = useState(options);
  const [currentValue, setCurrentValue] = useState("");

  const handleAddition = (e, { value }) => {
    setDropDownOptions((prevOptions) => [
      { text: value, value },
      ...prevOptions
    ]);
  };

  const handleChange = (e, { value }) => setCurrentValue(value);

  return (
    <Dropdown
      options={dropDownOptions}
      placeholder="Choose Language"
      search
      selection
      fluid
      allowAdditions
      value={currentValue}
      onAddItem={handleAddition}
      onChange={handleChange}
    />
  );
};


export default DropDownWithHooks;

Working Sandbox

如何使用 Hooks 在 React Sematic UI 中实现 AddAdiditions？

How to implement AddAdiditions in React Sematic UI using Hooks?

reactjs

react-hooks

semantic-ui