语义用户界面反应，下拉选择

Question

请看一下我的下拉列表代码，我正在EditProfile组件上使用语义ui react下拉列表。我在这里粘贴了一个示例代码，https://codesandbox.io/s/m4288nx4z8，但我无法让它工作，因为我不太熟悉React中的功能组件，我一直使用类组件。但是，您可以在github摘要中查看下面整个组件的完整代码。https://gist.github.com/mayordwells/b0cbb7b63af85269091f1f98296fd9bb

请，我需要从下拉列表的多个选择选项中插入值到数据库中的帮助，以及在再次查看配置文件编辑页面时显示这些值的方法。

我正在react rails应用程序中使用语义ui react。

另外，当我使用普通下拉菜单插入一个值而不使用多个select时，该值将被持久化到数据库中。

<Dropdown
  placeholder='Select Country'
  fluid
  search
  selection
  options={countryOptions}
  name='country'
  defaultValue={this.state.extraInfo.country}
  onChange={(e) => this.handleExtraInfoChange('country', e)}
/>

此代码处理下拉元素的更改。

handleExtraInfoChange = (name, event) => {
      let value;

      if (event.target.value !== undefined) {
        value = event.target.value;
      } else {
        value = event.target.textContent;
      }

      let newExtraInfo = Object.assign(this.state.extraInfo, { [name]: value })

      this.setState({ extraInfo: newExtraInfo});
    }

请告知这种不良行为的可能解决方案是什么？向数据库中插入多个值的最佳方法是什么？

提前感谢您抽出时间。

Answer 1

功能组件没有状态，它用于合成；您希望存储状态，因此您要么必须创建一个组件类，要么需要一个外部状态容器，如redux。