[英]Select/Datalist option to return a React Component
我有一个包含许多输入字段的表单。 有些领域是Select
和Datalist
哪些需要作为用户输入的数据进行自动完成的字段。 问题在于,将用服务器端数据填充的select / datalist选项值不是一个字,而是一个表,其中包含诸如“ city”,“ country”,“ post code”等数据。因此,当用户选择一个选项时,他实际上从表中选择了一行。
正如我在MDN中所读到的,
HTML
<option>
元素用于定义<select>
,<optgroup>
或<optgroup>
<datalist>
元素中包含的项目。允许的内容: 文本 ,可能带有转义字符。
因此,我想如果没有模块,我想做的事情是不可能的。
我已经尝试过的:
const PostCode = (code, city, country) => {
return (
<div>
<span style={{paddingRight:'10px'}}>{code}</span>
<span style={{paddingRight:'10px'}}>{city}</span>
<span>{country}</span>
</div>
)
}
class CustomerCard extends React.Component {
constructor(props){
super(props);
this.state = {
data: '',
Post_Code: {
City: '',
Code: '',
Country_Region_Code: '',
},
disabled: true,
open: false,
}
}
render(){
return (
<div>
<input className="input" list="postCodes"
disabled={this.state.disabled}
defaultValue={this.state.data.Post_Code}
onBlur={this.updateCustomer('Post_Code', 'str')}/>
<datalist id='postCodes'>
<option value={this.state.data.Post_Code} />
{Object.values(Post_Code).map((postcode, i) => {
return (
<option key={i} value={<PostCode code={postcode.Code} city=
{postcode.City} country={postcode.Country_Region_Code} />} />
)})}
</datalist>
</div>
);
}
这是行不通的。
任何帮助将非常感激!
我设法做到这一点的唯一方法是,尽管这不是我一直在寻找的,我希望有一个更好的解决方案:
<input className="input" list="postCodes"
disabled={this.state.disabled}
defaultValue={this.state.data.Post_Code}
//onBlur={this.updateCustomerPostCode}
/>
<datalist id='postCodes'
//onChange={'updateCustomerPostCode(postcode.Code, postcode.City, postcode.Country_Region_Code)'}
>
<option value={this.state.data.Post_Code} />
{Object.values(Post_Code).map((postcode, i) => {
return (
<option key={i}
value={`${postcode.Code} -- ${postcode.City} -- ${postcode.Country_Region_Code}`}
/>
)})}
</datalist>
现在的事情是,我将如何在onChange事件中使用这三个值,因为它看不到它们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.