Question

这是我的代码。给我建议样式自动完成组件

 <ReactAutocomplete

 items={obj}
 shouldItemRender={(item, value) => item.label.toLowerCase().indexOf(value.toLowerCase()) > -1}
getItemValue={item => item.label}
renderItem={(item) =>
<div
key={item.id}>
{item.label}
</div>}
value={this.state.value}
onChange={e => this.setState({ value: e.target.value })}
  onSelect={value => this.setState({ value })}
 />

Answer 1

尝试类似：

  <ReactAutocomplete   
                        ....
                            inputProps={{ style: { width: '100%',height: '100px'}, placeholder: 'test'}}  
                            wrapperStyle={{ width:  '100%'   }}
            />

Answer 2

您不能在自动完成元素上直接使用 className 属性，您必须使用“inputProps”属性，它是这段代码中的最后一个属性：

<Autocomplete
                        getItemValue={(item) => item.label}
                        items={[
                            { id: "SPY", label: 'SPY' },
                            { id: "MSFT", label: 'MSFT' },
                            { id: "FB", label: 'FB' },
                            { id: "TSLA", label: 'TSLA' },
                        ]}
                        shouldItemRender={(item, value) => item.label.toLowerCase().indexOf(value.toLowerCase()) > -1}
                        renderItem={(item, isHighlighted) =>
                            <div style={{ background: isHighlighted ? 'lightgray' : 'white' }}
                                key={item.id}>
                                {item.label}
                            </div>
                        }
                        value={this.state.symbol}
                        onChange={(e) => this.setState({ "symbol": e.target.value })}
                        onSelect={(val) => this.setState({ "symbol": val })}
                        inputProps={{ className: "form-control" }}
                    />

Answer 3

在你的renderItem prop中，你可以添加如下样式：

renderItem={(item) =>
<div style={{ background: 'white' }}>
  {item.label}
</div>
}

如何在react js中添加样式来反应自动完成

3 个答案: