css - React native - 如果表单提交时为空，则突出显示 TextInput

Question

我有一堆 TextInput 字段，在提交表单时，我想突出显示那些留空或内容无效的字段。 (使用边框)

什么是用最少的代码处理这个问题的好方法？

在提交时更新“isEmpty”的状态并有条件地为每个人渲染 css 似乎有点矫枉过正，因为有很多字段。

有没有办法通过 ID 或 name 获取 TextInput 并在 React 中以这种方式动态更新或附加到 CSS 规则原生

Answer 1

个人建议:

1-添加状态errors: []

2- 在提交时，检查 required 值并用自定义数据填充 errors；示例:

onSubmit() {
  let errors = []
  let { firstName, lastName } = this.state

  if (firstName === ''){
    errors.push('firstName')
  }

  if (lastName === ''){
    errors.push('lastName')
  }

  if (errors.length) { 
    this.setState({ errors });
    return;
  }

  // API CALL
}

3- 在你的渲染函数中，为你的 TextInputs

添加一个自定义类

render(){
  return (
    <TextInput style={{ borderColor: this.state.errors.include('firstName') ? 'red' : 'transparent' }} />
  )
}

当然，我建议将样式移至类并使用这些类，但这个示例是实现它们的一个良好开端。

---

编辑

我忘了提到，当您编辑文本框中的任何值以将边框重置为空时，您需要 setState({ errors: [] })。