Question

我正在尝试为反应中的即时/客户端表单验证创建可重用的更高解决方案。

我想过用验证方法创建一个验证类，并简单地将相关的方法传递给表单字段。

因此，例如，如果我有一个必需的电子邮件字段，它将从验证类传递两个方法来检查。

这是一个简短的例子：

class Validate {
  constructor (value) {
    this.value = value
  }

  required = () => {
    console.log('in validator required, value is :', this.value)
    if (!this.value.toString().trim().length) {
      return 'required'
    }
  }
  lt = () => {
    if (this.value.toString().trim().length < 50) {
      return 'extra details must be at least 50 characters'
    }
  }
}

export default class Form extends Component {
  constructor () {
    super()
    this.validate = new Validate(this.state.email) // Passing the field to the instance here means it will be undefined even after the state changed with new value for email.
  }
  /* ... */

  render () {
    const {
      email
    } = this.state.value
    const {
      required
    } = this.validate
    return (
      <form className='form__wrapper' onSubmit={this.onSubmit}>
        <InputText
          type='text'
          value={email}
          validations={required}
          /* ... */
        />
      </form>
    )
  }
}

const InputText = ({ value, validate }) => (
  <div className={`field-wrapper ${customClass}`} >
    <input
      value={value}
      /* ... */
    />
    {value ? validate(value) : null}
  </div>
)

我的问题是，从上面的评论可以看出，我不知道如何将我的变量传递给类，这样当用户输入数据和电子邮件字段的值发生变化时，它们就会更新。

Answer 1

说实话，我觉得javascript是一种功能性语言而不是OOP语言。

但是，这对我来说就像一种反模式。该值必须在它所属的类中更新，即使在OOP中也是如此（除了公共变量之外，但即便如此，就我记忆而言，它们也会被直接更改而不是通过引用。

所以我推荐的两个解决方案是：

最简单的使用函数编程，将值直接传递给函数。
Make Validate函数环绕表单组件，然后将电子邮件作为prop传递给表单组件，更改事件也应传递下来并在表单组件中触发。

在es6中的类之间传递和更新变量

1 个答案: