当不可变列表包含空值时禁用按钮

Question

如果用户在文本框中输入空白值，则应该禁用该按钮。我正在使用以下过滤器进行检查。但这行不通。请建议。

<ALink href='javascript:void(0);'
className='button primary default-size' id='globalParametersCancel'
content={localeHelper.translate('iaSampling.iaGlobalConfiguration.reset')}
isDisabled={(!this.globalParameterChanged) && (!this.gaparameterlist?.find(x => x.value == ' '))}
onClick={this.reset} />     

Answer 1

如果您正在使用React，您可以这样做，想象您有一个带有onChange的输入字段。您可以将更改处理程序中的状态设置为e.target.value。当状态改变时，useEffect()回调函数被调用，并检查输入是否有效。如果输入是有效的(您可以执行任何您喜欢的验证，例如日期、数字、正则表达式…)，则设置valid (setValid(true))。

// callback after setting text
useEffect(() => {
// do validation
if (text) {
setValid(true);
} else {
setValid(false);
}
}, [text]);
const handleChange = (e) => {
e.preventDefault(); // prevent default action
setText(e.target.value); // set text
};

然后，根据valid布尔状态值，你可以呈现你想要的，在这种情况下是一个按钮，如果不是有效的=>显示一个消息或任何你喜欢的

const validDisplay = valid ? (
<button onClick={handleClick}>submit</button>
) : (
<span>Not valid!</span>
);

这是你最终的return的样子。

return (
<div>
<input value={text} onChange={handleChange}></input>
<p>
{validDisplay} {text}
</p>
</div>
);

我做了一个沙盒，你可以在这里试试