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>

在这里，我们将输入组件连接到状态值。之所以称为 control 组件，是因为其值是由外部来源（状态值）控制的，而不是 uncontrol 组件，这意味着输入元素保留了它的自己的内部状态（如果您不直接设置其value属性，则输入的默认方式。

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

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

Answer 2

请检查这个完整的示例，其中我使用了类组件，并在状态对象下使用了disable属性。在文本框上编写内容时，disabled属性将设置为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>
    );
}

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

2 个答案: