Question

我需要这个功能，当点击取消按钮时，所有以前的输入都将被清除。我的意思是，如果文本字段或滚动条中的值应该重置为默认值。这就是我现在得到的结果，即使我点击了取消按钮 (<button type="delete" onClick={deleteFilter} >X</button>)，尽管过滤器已禁用，但该值仍然存在：

const [stateSelected, setStateSelected] = useState('')
    const [jobType, setJobType] = useState('');
    const [type, setType] = useState('');
    var states = statepicker.getStates('us');
    document.body.style = 'position:absolute;';

    const stateChange = e => {
        setStateSelected(e.target.value)
    }

    const jobChange = e => {
        setJobType(e.target.value)
    }

    const typeChange = e => {
        setType(e.target.value)
    }

    function filterOn(){
        if(filter.position != "" || filter.state != "" || filter.type != ""){
            return true;
        } else{
            return false;
        }
    }

    function deleteFilter(){
        setFilter({
            position: "",
            state: "",
            type: ""
        })
    }

    const handleSignUp = useCallback(async event => {
        event.preventDefault();

        
        setFilter({
            position: jobType,
            state: stateSelected,
            type: type
        });
        setFilterOpen(false);
        setJob([]);
    })

    return (
        <div>
                <div className="settings__Section">
                    <div className="settings__SectionHeader">
                        Filter
                    </div>
                    <form onSubmit={handleSignUp}>
                        <input className="settings__inputBox" name="occupation" type="occupation" placeholder="Job Title" onChange={jobChange}/>

                        <select className="settings__inputSelect" onChange={stateChange} value={stateSelected}>
                        <option value={""} disabled={true}>Select State</option>
                        {
                            states.map(state => (
                                <option value={state} name="state">{state}</option>
                            ))
                        }
                        </select>

                        <select className="settings__inputSelect" onChange={typeChange} value={type}>
                            <option value={""} disabled={true}>Select Job Type</option>
                            <option value={"Entry Level"} name="type">Entry Level</option>
                            <option value={"Internship"} name="type">Internship</option>
                            <option value={"Fellowship"} name="type">Fellowship</option>
                            <option value={"Apprenticeship"} name="type">Apprenticeship</option>
                        </select>

                        <button type="submit" className="settings__signBtn">Save Filter</button>
                        
                    </form>

                    {filterOn() && 
                        <div>
                            <p>Position: {filter.position} Location: {filter.state} Job Type: {filter.type}</p>
                            <button type="delete" onClick={deleteFilter} >X</button>
                        </div>
                    }
                    
                </div>
            
        </div>
    );

Answer 1

<form onSubmit={handleSignUp}>
                        <input className="settings__inputBox" name="occupation" type="occupation" placeholder="Job Title" onChange={jobChange}/>

                        <select className="settings__inputSelect" onChange={stateChange} value={stateSelected}>
                        <option value={""} disabled={true}>Select State</option>
                        {
                            states.map(state => (
                                <option value={state} name="state">{state}</option>
                            ))
                        }
                        </select>


                        <button type="submit" className="settings__signBtn">Save Filter</button>
                        <button type="reset" >X</button>
                    </form>

尝试使用重置按钮，我想它可以做到这一点

Answer 2

好的，虽然您的代码中缺少一些行，但我想我知道问题所在。如果位置、状态或类型与空字符串不同，则过滤器呈现。

但是当您删除过滤器时，您只会重置位置和状态：

POST API

所以要修复它，只需为正在调用的状态函数添加类型：

function deleteFilter(){
    setFilter({
        position: "",
        state: ""
    })
}

在 React 中单击按钮时清除输入

2 个答案: