[英]Semantic UI React, Dropdown Selection
Please take a look at my code for Dropdown, I'm using the semantic ui react dropdown on an EditProfile component.请查看我的 Dropdown 代码,我在 EditProfile 组件上使用语义 ui react 下拉列表。 I have pasted a sample code here, https://codesandbox.io/s/m4288nx4z8 , but I could not get it to work because I'm not very familiar with functional components in React, I've always used Class component.
我在这里粘贴了一个示例代码, https://codesandbox.io/s/m4288nx4z8 ,但我无法让它工作,因为我对 React 中的功能组件不是很熟悉,我一直使用 Class 组件。 But you can check the full code for the whole component below in the github gist.
但是您可以在 github gist 中查看下面整个组件的完整代码。 https://gist.github.com/mayordwells/b0cbb7b63af85269091f1f98296fd9bb
https://gist.github.com/mayordwells/b0cbb7b63af85269091f1f98296fd9bb
Please, I need help on inserting values from multiple select options of a Dropdown into the Database and also a way to display that back upon viewing the profile edit page again.拜托,我需要有关将下拉列表的多个选择选项中的值插入数据库的帮助,以及在再次查看配置文件编辑页面时显示该值的方法。
I'm using semantic-ui-react in react + rails app.我在 react + rails 应用程序中使用语义 UI 反应。
Also when I insert a value using a normal drop down without multiple select, the value gets persisted into the database.此外,当我使用没有多重选择的普通下拉列表插入一个值时,该值会被持久化到数据库中。
<Dropdown
placeholder='Select Country'
fluid
search
selection
options={countryOptions}
name='country'
defaultValue={this.state.extraInfo.country}
onChange={(e) => this.handleExtraInfoChange('country', e)}
/>
This code handles change for the dropdown elements.此代码处理下拉元素的更改。
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});
}
But when I visit the page again, I get a white blank in the input box.但是当我再次访问该页面时,我在输入框中得到一个白色的空白。 Here's a screen pic for that.
这是一个屏幕图片。 When I comment out the defaultValue or value property(i have tried with defaultValue and value), the white blank disappears, but the value picked by a user is also not seen.
当我注释掉 defaultValue 或 value 属性时(我尝试过使用 defaultValue 和 value),白色空白消失,但也看不到用户选择的值。
Please advice what is a possible solution to this misbehavior?请建议这种不当行为的可能解决方案是什么? And what is the best way to insert multiple values into the Database?
将多个值插入数据库的最佳方法是什么?
Thanks in advance for your time.在此先感谢您的时间。
A functional component does not have state, it's used for composition;功能组件没有状态,它用于组合; you want to store state, so you either have to create a
Component
class or you need an external state container like redux
.你想要存储状态,所以你要么必须创建一个
Component
类,要么你需要一个像redux
这样的外部状态容器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.