语义UI反应，下拉选择

Question

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

请将有关Dropdown的多个选项中的值插入数据库的帮助，以及在再次查看个人资料编辑页面时显示该值的方法。

我在react + rails app中使用semantic-ui-react。

此外，当我使用普通下拉列表插入值而没有多次选择时，该值将持久保存到数据库中。

<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});
    }

但是当我再次访问该页面时，我在输入框中看到一个白色的空白。这是一张屏幕图片。当我注释掉defaultValue或value属性时（我已尝试使用defaultValue和value），白色空白消失，但用户选择的值也没有看到。

请建议这种不当行为的可能解决方案是什么？将多个值插入数据库的最佳方法是什么？

提前感谢您的时间。

Answer 1

功能组件没有状态，它用于组合;你想存储状态，所以你要么必须创建一个Component类，要么需要一个像redux这样的外部状态容器。