如何使占位符仍然可见？

Question

如何让占位符始终可见？

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

我尝试 fiddle 使用自定义组件，但没有成功..

设计：

Answer 1

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

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 并将其替换为 ValueContainer 自定义组件中的 div。从那里我可以按照我想要的方式设计我的假占位符，它不会受到 select 是否被填充的影响。

其次，我正在更改样式以增加 ValueContainer 的大小并使 SingleValue relative 成为可能，因为默认情况下它是 absolute.

这里是live example.

如何使占位符仍然可见？

How to make placeholder still visible?

reactjs

react-select