如果在反应数组中找到元素，则禁用提交按钮

Question

如果用户输入任务列表中已存在的值，我想禁用表单上的提交按钮。 'Todos' 是存储列表的数组，我使用 'some' 来检查输入值是否等于某个标题。但是，它不起作用。

代码

const [disable, setDisable] = useState(false);
const onFormSubimit = (event) => {
        event.preventDefault();
        if (!editTodo) { //mudar depois a condição
            setTodos([...todos, {
                id: uuidv4(),
                title: input,
                completed: false
            }]);
            setInput("");
        } else {
            updateTodo(input, editTodo.id, editTodo.completed);
        }
    }
    const handleInputChange = (event) => {
        let inputValue = event.target.value;
        setInput(inputValue);
        getInputValue(inputValue);
    }
    const getInputValue = (inputValue) => {
        let some = todos.some(item => item.title === inputValue);
        if (some!=disable) {
           setDisable(true);
        }
    }
    return (
        <form onSubmit={onFormSubimit}>
            <input type='text' name='text' placeholder='Insira o nome da tarefa' className='task-input' value={input} onChange={handleInputChange} required></input>
            <button type='submit' className='button-add' disabled={getInputValue} >{editTodo ? 'Alterar' : 'Adicionar'}</button>
        </form>
    );
}

Answer 1

您的按钮状态取决于 input（由 setInput 设置的变量）和 todos。所以处理这个问题的最好方法是通过一个 useEffect 和一个依赖数组。

useEffect(() => {
  // Array.some returns a boolean
  setDisable(todos.some(item => item.title === input))
}, [todos, input]);

您的按钮代码

<button type='submit' className='button-add' disabled={disable} >{editTodo ? 'Alterar' : 'Adicionar'}</button>

您也可以直接在按钮中使用此逻辑，如下所示。在这种情况下，不需要 useEffect

<button type='submit' className='button-add' disabled={todos.some(item => item.title === input)} >{editTodo ? 'Alterar' : 'Adicionar'}</button>

如果在反应数组中找到元素，则禁用提交按钮

Disable submit button if element found in array in react

reactjs

use-state