代码之家 › 专栏 › 技术社区 › xrep

如何使占位符保持可见?

react-select

0

xrep · 技术社区 · 6 年前

如何使占位符始终可见?

当我在React Select中键入内容时,占位符将消失。

我试着摆弄自定义组件,但没有成功。

设计:

1 回复 | 直到 6 年前

1

Laura 6 年前

以下是我解决您问题的方法:

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 自定义组件。从那里我可以按照我想要的方式设置假占位符的样式,并且它不会受到选择是否已填充的事实的影响。

第二,我正在更改样式以增加 价值保持器 让一切成为可能 SingleValue relative 默认情况下 absolute .

这里A live example .