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

Question

我有一个使用钩子的 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>

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

当输入组件接收到输入（比如某人输入一个字符）时，onChangeprop 被调用。然后我们要做的就是获取输入元素 ( e.target.value)的新值并使用它来设置状态。

如果您可以从其他状态派生状态，那么您不应该将其存储在状态中。调用状态变量disabled只会使事情变得更加复杂。总体思路是尽可能少地使用状态，并从该状态中尽可能多地进行计算。