Reactjs 反应输入标签禁用道具问题

我正在尝试在React.js中构建一个登录表单。我想根据validate方法返回的结果启用/禁用登录按钮。React为标签上的prop

disabled

抛出错误“无效值”。将其从元素中删除，或传递字符串或数值以将其保留在DOM中。“。有人遇到过同样的错误吗？帮我了解这里出了什么问题

import React，{Component}来自“React”；
从“./common/Input”导入输入；
从“Joi浏览器”导入Joi；
类LoginForm扩展组件{
状态={
账户：{
用户名：“”，
密码：“”，
},
错误：{}，
};
模式={
用户名：Joi.string（）.required（）.label（“用户名”），
密码：Joi.string（）.required（）.label（“密码”），
};
异常={
流产：错，
};
handleSubmit=（事件）=>{
event.preventDefault（）；
const errors=this.validate（）；
如果（错误）返回；
控制台日志（“已提交”）；
};
验证=（）=>{
const result=Joi.validate(
这个国家账户，
这个.schema，
这是我的错
);
常量错误={}；
如果（！result.error）返回null；
result.error.details.map（（细节）=>{
错误[detail.path[0]]=detail.message；
返回详细信息。路径[0]；
});
//console.log（错误）；
this.setState（{errors}）；
返回错误；
};
validateProperty=（{name，value}）=>{
const propertyTobeValidated={[name]：value}；
const schema={[name]：this.schema[name]}；
const{error}=Joi.validate（propertyTobeValidated，schema）；
返回错误？错误。详细信息[0]。消息：null；
};
handleChange=（{currentTarget}）=>{
常量错误={…this.state.errors}；
const error=this.validateProperty（currentTarget）；
如果（错误）错误[currentTarget.name]=错误；
否则删除错误[currentTarget.name]；
const account={…this.state.account}；
帐户[currentTarget.name]=currentTarget.value；
this.setState（{account，errors}）；
};
render（）{
const{account，errors}=this.state；
返回(
登录
登录
);
}
}
导出默认登录信息；

给你一个解决方案

import React，{Component}来自“React”；
从“./common/Input”导入输入；
从“Joi浏览器”导入Joi；
类LoginForm扩展组件{
状态={
账户：{
用户名：“”，
密码：“”，
},
错误：{}，
};
模式={
用户名：Joi.string（）.required（）.label（“用户名”），
密码：Joi.string（）.required（）.label（“密码”），
};
异常={
流产：错，
};
handleSubmit=（事件）=>{
event.preventDefault（）；
const errors=this.validate（）；
如果（错误）返回；
控制台日志（“已提交”）；
};
验证=（）=>{
const result=Joi.validate(
这个国家账户，
这个.schema，
这是我的错
);
常量错误={}；
如果（！result.error）返回false；
result.error.details.map（（细节）=>{
错误[detail.path[0]]=detail.message；
返回详细信息。路径[0]；
});
//console.log（错误）；
this.setState（{errors}）；
返回true；
};
validateProperty=（{name，value}）=>{
const propertyTobeValidated={[name]：value}；
const schema={[name]：this.schema[name]}；
const{error}=Joi.validate（propertyTobeValidated，schema）；
返回错误？错误。详细信息[0]。消息：null；
};
handleChange=（{currentTarget}）=>{
常量错误={…this.state.errors}；
const error=this.validateProperty（currentTarget）；
如果（错误）错误[currentTarget.name]=错误；
否则删除错误[currentTarget.name]；
const account={…this.state.account}；
帐户[currentTarget.name]=currentTarget.value；
this.setState（{account，errors}）；
};
render（）{
const{account，errors}=this.state；
返回(
登录
登录
);
}
}
导出默认登录信息禁用是一个布尔属性，这意味着它只能具有true或false值。validate函数不是布尔函数，而是返回一个对象，因此React会抛出一个“无效值”错误。为了解决此问题，您可以检查this.validate的
结果是否为空：

<button 
    disabled={(this.validate() !== null)} 
    className="btn btn-primary"
>
    Login
</button>


登录

另外，您忘记调用您的
this.validate
：）

关于“最大更新深度…”，您应该从
this.validate
中删除
this.setState
，因为您已经在
handleChange
方法中将错误置于状态
 disabled是一个布尔属性，不是函数。您的this.validate是一个函数这是一个很好的解决方案，但我认为如果渲染完全由状态决定，那么它更易于维护。我要么在作为错误对象的状态块之外添加另一个指示错误存在的状态块，要么将
errors
状态转换为包含
length
属性的数组，因此
@Shiladitya我尝试了您建议的解决方案。我仍然面临着同样的错误。默认情况下，“登录”按钮处于启用状态。我正在使用React 16.9。我尝试了你的解决方案。我现在面临错误：“超过了最大更新深度。当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环。”我使用的是React版本16.9。对于您的建议，在反应中我们会在任何行动上传递方法的参考；因此，我将disabled={this.validate}。在这种情况下，您不应该传递对该方法的引用，而应该传递它返回的值，因为
按钮
需要
disabled
propI修改我的答案中的值，现在它应该
<button 
    disabled={(this.validate() !== null)} 
    className="btn btn-primary"
>
    Login
</button>