Select 关于与组件的反应

Question

我对这段代码有疑问：

const ListItem = ({data: {loading, error, items}}) => {
  if (loading) {
    return <p>Loading ...</p>;
  }
  if (error) {
    return <p>{error.message}</p>;
  }

  console.log(items)

  return (
    <select>
      <option key='0' value='0' disabled defaultValue>Seleccione un Item</option>
      {items.map(item => <option key={item.id} value={item.id}>{item.item}</option>)}
    </select>
  );
}

const QUERY_ITEMS = gql`
  query{
    items{
      id
      item
    }
  }
`
const ItemsListWithData = graphql(QUERY_ITEMS)(ListItem);

是一个简单的Select组件，通过查询填充，但不出现在索引中。如果我把 ul 放在 select 上没问题，但是 select 是问题所在，我不知道发生了什么，我会用代码添加结果。非常感谢，对不起我的英语！

enter image description here

Answer 1

你的问题是包裹你的 <select> 的 <div> 有错误的 class。

变化自

<div class="input-field col s12"> /* ...  */ </div>

到

<div class="select-field col s12"> /* ...  */ </div>

一切都会按预期进行！

Select 关于与组件的反应

Select On React with component

select

components

reactjs

react-select

react-apollo