reactjs - 如何增加 react 自动完成中的输入文本框大小？

Question

如何增加react-autocomplete包中输入标签的大小？我不知道如何更改输入框大小，因为没有相关的明确文档？ here is the link of react-autocomplete package

示例

<Autocomplete
  getItemValue={(item) => item.label}
  items={[
    { label: 'apple' },
    { label: 'banana' },
    { label: 'pear' }
  ]}
  renderItem={(item, isHighlighted) =>
    <div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
      {item.label}
    </div>
  }
  value={value}
  onChange={(e) => value = e.target.value}
  onSelect={(val) => value = val}
/>

这段代码会自动创建一个某种大小的输入框，我的问题是如何调整输入框的大小？

Answer 1

看起来您可以使用以下属性的组合来影响 input 样式:inputProps、wrapperStyle。

<Autocomplete
   {...props}
   inputProps={{ style: { width: 100% } }}
   wrapperStyle={ width: 1000 }
/>