Отключить кнопку отправки, если поле пусто - PullRequest
Новая
       3

Отключить кнопку отправки, если поле пусто

0 голосов
/ 27 мая 2020

У меня есть приложение 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>

Ответы [ 2 ]

0 голосов
/ 28 мая 2020

Пожалуйста, проверьте этот полный пример, в котором я использовал компонент класса и использовал свойство disable для объекта состояния. Когда вы пишете что-то в текстовом поле, свойство disable будет установлено как 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>
    );
}
0 голосов
/ 27 мая 2020

Если вы хотите отключить кнопку, когда строка ввода пуста, тогда единственное состояние, которое вам нужно, - это значение строки ввода. 

const [inputVal, setInputVal] = useState('')

// ...

<input value={inputVal} onChange={e => setInputVal(e.target.value)} />

// ...

<button disabled={!inputVal}> /* ... */ </button>

Здесь мы подключаем компонент ввода к значению состояния . Это называется управляемый компонент, потому что его значение контролируется внешним источником (значением состояния), в отличие от неконтролируемого компонента, что означает, что входной элемент содержит собственный внутренний state (входы по умолчанию работают, если вы не устанавливаете их value prop напрямую.

Когда входной компонент получает входные данные (например, кто-то вводит символ), вызывается onChange prop. Тогда do - это взять новое значение элемента ввода (e.target.value) и использовать его для установки состояния.

Если вы можете получить состояние из другого состояния, вы не должны сохранять его в состоянии. Наличие переменной состояния с именем disabled только усложняет задачу. Общая идея состоит в том, чтобы использовать как можно меньше состояния и вычислять как можно больше из этого состояния.

...