使用样式化组件在第一个焦点上设置输入边框样式答案

【问题标题】：Styling input border on first focus using styled components使用样式化组件在第一个焦点上设置输入边框样式
【发布时间】：2018-05-30 18:03:27
【问题描述】：

我有一个样式为styled components 的输入。它有一个min 和max 编号，并作为道具传递给红色边框：

export const StyledInput = styled.input`
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
  }
  display: block;
  outline: none;
  font-size: 16px;
  font-weight: 500;
  -webkit-appearance: none;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  background-color: #fff;
  border: ${(props) => (props.option === true ? '0px' : '')};
  line-height: 30px;
  /* vertical-align: middle; */
  z-index: 1;
  height: 33px;
  width: ${(props) => (props.numberInputWidth)};
  padding: 0 8px;
  margin-left: 5px;
  margin-top: 20px;
  transition: border-color 0.3s ease-in-out;

  &:focus {
    border-color: ${COLORS.LIGHTGREEN};
    transition: border-color 0.3s ease-in-out;

    ${({ error }) => error && `
      border-color: ${COLORS.ERROR};
    `}
  }
`

还有我的组件的状态：

this.state = {
  inputTouched: false,
  inputValue: 0,
}

和错误处理道具：

error={!!(inputValue > max || inputValue < min)}

假设min = 1 和max = 100。它按预期工作：

所以，当this.state.inputValue 超过最小值/最大值时，它会产生一个红色边框来指示错误。但是，在渲染页面时，输入设置为0，单击它会出现红色边框。

我希望它最初是绿色的，然后让错误逻辑处理它。我希望它看起来像这样：

但仅在初始点击时

有没有办法这样做？

【问题讨论】：

标签： javascript css reactjs styled-components

【解决方案1】：

实际上，您只想在用户关注表单之后应用错误检查/css 样式。

您要处理的案例有：

初始页面加载（无错误检查，绿色样式，0 个席位）
InputWasFocused（错误检查，如果席位无效则为红色）

如果输入最初为绿色，而显示为 0，我认为 UX 不是很好。我个人会将其保留为白色，并且仅在输入有效值后才显示为绿色，但这已经结束给你。

在你的状态：

this.state = {
  inputTouched: false,
  inputValue: 0,
  inputWasFocused: false
}

您的错误处理应更新为仅在用户关注输入后检查错误。

if(inputWasFocused) {
  error={!!(inputValue > max || inputValue < min)}
}

可以实现替代逻辑以简单地允许您的默认值 0 成为可接受的输入，直到输入被聚焦 - 但我认为上述内容也相当清楚。

然后，您唯一需要做的就是在用户取消聚焦输入后将 inputWasFocused 的状态设置为 true。

将处理程序添加到具有您的输入字段/输入组件的类：

seatInputBlurHandler = () => {
  this.setState({inputWasFocused: true})
}

并将处理程序传递给您的输入字段，以在 onBlur 上执行为此，请将以下事件添加到您的输入字段 JSX：

<input type="text" onBlur={() => this.seatInputBlurHandler()}>

所以毕竟：页面加载时，inputWasFocused 为 false，错误检查不适用。当用户选择输入时，在他们离开之前什么都不会发生 - 当他们离开时，会触发 onBlur，并执行 seatInputBlurHandler，导致 inputWasFocused 设置为 true，因此将运行错误检查逻辑，并且该字段应该是后适当的样式。

如果您需要 JSX 语法方面的帮助，请在您呈现输入字段的位置发布 JSX 代码。

【讨论】：