Question

我有一个包含许多输入字段的表单。有些字段是Select和Datalist字段，它们在用户输入数据时需要自动完成。问题在于，将用服务器端数据填充的select / datalist选项值不是一个字，而是一个表，其中包含诸如“ city”，“ country”，“ post code”等数据。因此，当用户选择一个选项时，他实际上是从表中选择一行。

我在MDN中读过，

HTML <option>元素用于定义<select>，<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>
  );
}

这不起作用。

任何帮助将不胜感激！

Answer 1

我设法做到这一点的唯一方法是，尽管这不是我一直在寻找的，我希望有一个更好的解决方案：

<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事件中使用这三个值，因为它看不到它们。

选择/数据列表选项以返回React组件

1 个答案: