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

Question

我有一个用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，单击它将显示红色边框。

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

但仅在初次点击时

有没有这样做？

Answer 1

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

您要处理的案例是：

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

如果输入最初为绿色，我认为用户体验非常好，而显示为0.我个人会将其保留为白色，并且只有在输入有效值后才显示为绿色，但是这样就可以了给你。

在你的州：

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

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

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

可以实现替代逻辑，只是简单地允许默认值0为可接受的输入，直到输入已经集中 - 但我认为上面的内容也相当清楚。

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

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

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

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

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

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

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