如果字段为空，则禁用提交按钮

Question

我有一个使用 Hooks 的 React 应用程序，并试图弄清楚如果搜索字段为空，如何禁用提交按钮。

假设一个带有提交按钮的常规表单字段，我如何设置一个状态钩子，使搜索按钮保持禁用状态，直到用户输入文本。我假设应该有一个 onChange 函数可能会更新输入更改的状态，但不完全确定实现。

const [disabled, isDisabled] = useState(true);
<input type="text" id="q" name="q" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>

Answer 1

如果要在输入字符串为空时禁用按钮，则唯一需要的状态是输入字符串的值。

const [inputVal, setInputVal] = useState('')
// ...
<input value={inputVal} onChange={e => setInputVal(e.target.value)} />
// ...
<button disabled={!inputVal}> /* ... */ </button>

在这里，我们将输入组件连接到状态值。这称为受控组件，因为它的值由外部源(状态值(控制，而不是不受控制的组件，这意味着输入元素保持自己的内部状态(如果您不直接设置其valueprop，则默认输入的工作方式。

当输入组件收到输入(例如有人键入字符(时，将调用onChangeprop。然后我们要做的就是获取输入元素的新值(e.target.value(并使用它来设置状态。

如果可以从其他状态派生状态，则不应将其存储在状态中。拥有一个名为disabled的状态变量只会让事情变得更加复杂。一般的想法是使用尽可能少的状态，并从该状态中尽可能多地计算。

Answer 2

请检查这个完整的示例，其中我使用了类组件并在状态对象下使用了禁用属性。当您在文本框上写入内容时，禁用属性将设置为 false。

import React from "react";
export default class Login extends React.Component {
constructor(props) {
super(props);
this.state = {disable: true};
}
handleChange = (event) => {
this.setState({disable: event.target.value === ''})
};
render() {
return (
<div>
<div>
Name: <input onChange={this.handleChange}/> <br/>
<button disabled={this.state.disable} >Login</button>
</div>
</div>
);
}
}

这是功能组件的相同示例

import React, {useState} from "react";
export default function Login() {
const [disable, setDisable] = useState(true);
function handleChange(event) {
setDisable(event.target.value === '');
}
return (
<div>
<div>
Name: <input onChange={handleChange}/> <br/>
<button disabled={disable}>Login</button>
</div>
</div>
);
}