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

Question

我有一个使用钩子(Hook)的 React 应用程序，并试图弄清楚如何在搜索字段为空时禁用提交按钮。

假设有一个带有提交按钮的常规表单字段，我如何设置一个状态 Hook ，使搜索按钮保持禁用状态，直到用户输入文本。我假设应该有一个 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>

这里我们将输入组件连接到状态值。这称为 controlled 组件，因为它的值由外部源(状态值)控制，而不是 uncontrolled 组件，这意味着输入元素保持它的自己的内部状态(如果你不直接设置它们的 value 属性，输入的默认方式。

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

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