Question

我正在使用npm Validator并尝试验证输入信息，然后根据验证更改提交地址按钮的状态。现在可以设置它的方式，我可以在控制台中输入文字，但不能在UI中显示文字。我不确定我有什么问题。该按钮也不会更改为“已启用”。

以下是组件：

memcpy()

Answer 1

我认为该错误与滥用this.setState的回调函数有关。

在inputChangeHandler方法中，您向this.setState()传递了三个参数，但是，this.setState()希望您最多仅传递两个参数，第二个参数是回调函数。

由于您将回调函数作为第三个参数传递，this.setState()将无提示地忽略它，因此不会调用您的验证方法。

另一个问题与inputChangeHandler的名称参数有关，inputChangeHandler将仅接收事件对象，而不接收名称。为了访问输入元素的名称属性，您将需要通过event.target.name

访问它

要解决此问题，可以将inputChangeHandler更改为

inputChangeHandler = event => {
    const { name, value } = event.target;
    console.log('inputChange', event.target.name, event.target.value)

    // notice the square bracket, this means we use the computed variable as 
    // the object key, instead of using the string 'name' as object key
    // also the name attribute in your Input element must match your state's key
    // use name='lastName' instead of name='last name' as your state's key is lastName
    this.setState({
      [name]: value
    }, this.canSubmit) // changing this line
}

如果要保留console.log(this.state.submitDisabled)，可以将其添加到验证方法中。

canSubmit = () => {
    console.log("canSubmit", this.state.submitDisabled) // add it here
    const { firstName, lastName, address, city, prefecture, zipCode, email} = this.state
    if (validator.isAlpha(firstName) 
    && validator.isAlpha(lastName) 
    && address > 0
    && validator.isAlpha(city)
    && validator.isAlpha(prefecture)
    && zipCode > 0
    && validator.isEmail(email)) {
      this.setState({submitDisabled: false})
    } else {
      this.setState({submitDisabled: true})
    }
}

在render方法中，我想你的意思是

if (this.state.paymentComplete)

代替

if (this.state.complete)

此外，您还可以通过底部的按钮对禁用的属性值进行硬编码

<button
    className="checkout-button"
    disabled={false}
    onClick={this.submit}
>
    Submit
</button>

也许你是说

<button
    className="checkout-button"
    disabled={this.state.submitDisabled}
    onClick={this.submit}
>
    Submit
</button>

请注意，输入元素的type属性应为“文本”，“数字”，“复选框”等...而不是诸如“姓氏”或“县”之类的一些随机文本。

如何根据ReactJS中表单的状态获取输入验证并禁用/启用提交按钮

1 个答案: