禁用更改时的参考验证

Question

我有一个带有选择输入的参考输入。当我更改所选值时，会触发请求。

当我想要的值不是 ID 时，这会导致问题。有没有办法禁用它？

好像是为了表单验证。

谢谢！

Answer 1

遵循此代码，并根据您的标准调整此功能。希望对你有帮助。

import React, { useState } from 'react';

const YourComponent = () => {
    const [selectedValue, setSelectedValue] = useState('');
    const [triggerRequest, setTriggerRequest] = useState(false);

    const handleSelectChange = (e) => {
        const value = e.target.value;
        setSelectedValue(value);

        setTriggerRequest(false);

        // Set triggerRequest true if the value meets your criteria
        if (isValidID(value)) {
          setTriggerRequest(true);
        }
    };

    const isValidID = (value) => {
        // Replace this with your own validation logic
        return value.startsWith('ID_');
    };

    const handleSubmit = () => {
        if (triggerRequest) {
            console.log(`Request triggered with ID: ${selectedValue}`);
        } else {
            console.log('Invalid ID, request not triggered.');
        }
    };

    return (
        <div>
            <select value={selectedValue} onChange={handleSelectChange}>
              <option value="">Select an option</option>
              <option value="ID_1">Option 1</option>
              <option value="ID_2">Option 2</option>
              <option value="ID_3">Option 3</option>
            </select>
            <button onClick={handleSubmit}>Submit</button>
        </div>
    );
};

export default YourComponent;