如何使占位符仍然可见？

Question

如何使占位符始终可见？

当我在react-select中输入内容时，占位符消失。

我试图摆弄自定义组件，但是没有成功。

设计：

Answer 1

这是我解决您问题的方法：

verify()

如您所见，这是使用自定义样式和组件的组合。

首先，我要杀死const ValueContainer = ({ children, ...props }) => { return ( components.ValueContainer && ( <components.ValueContainer {...props}> <div style={{color: 'gray', position: 'absolute', top: 8, left: 8, fontSize: 12}}>Label:</div> {children} </components.ValueContainer> ) ); }; const styles = { singleValue: base => ({ ...base, position: 'relative', top: 'initial', transform: "none" }), valueContainer: base => ({ ...base, position: 'relative', paddingTop: 20 }) }; function App() { return ( <div className="App"> <Select components={{ ValueContainer }} placeholder="" styles={styles} options={options} /> </div> ); } 并将其替换为placeholder自定义组件中的div。从那里，我可以按照自己想要的方式来对假占位符进行样式设置，并且不会因选择是否被填充而受到影响。

第二，我正在更改样式，以增加ValueContainer的大小并可能使用ValueContainer SingleValue，默认情况下为relative。

这里是live example。