如何解决在 React.js 中单击按钮时重置/清除选择选项中的选定值？
我正在处理 React，我有几个下拉和文本字段，当我单击清除按钮时，我想从选择选项和文本字段中清除/重置选定的值。我试过一些逻辑，但它不起作用。有人能帮我吗？我创建了一个名为 "handleReset" 的函数，但它什么也不做，也没有显示错误。
这是我的代码：
import React,{ useState,useEffect } from "react";
import {
Button,Container,} from "react-bootstrap";
import { Caraction } from "../../Store/Actions/Caraction";
import { usedispatch,useSelector } from "react-redux";
const CarRequests = () => {
const dispatch = usedispatch();
const getCarMake = useSelector((state) => state.CarReducer.car);
const getCarMileage = useSelector((state) => state.CarReducer.mileage);
const getCarTrim = useSelector((state) => state.CarReducer.trim);
let [value,setValue] = useState()
let handleChange = (e) => {
setValue(e.target.value)
}
const handleReset = (e) => {
setValue(e.target.value = "");
}
useEffect(() => {
dispatch(Caraction.CarMake());
dispatch(Caraction.CarMileage());
dispatch(Caraction.CarTrim());
},[dispatch]);
return (
<div className="flex-row align-items-center section">
<h3>
Filters
<i className="fa fa-cog icon float-right"></i>
</h3>
<Container className="Box-shadow p-4">
<div className="form-row">
<div className="form-group col-lg-3">
<label>Make:</label>
<select className="custom-select" onChange={handleChange}>
<option value=''>Please select...</option>
{getCarMake.map((data,key) => <option value={data.value} key={key}>{data.name}</option>)}
</select>
</div>
<div className="form-group col-md-3">
<label>Model:</label>
<select className="custom-select">
<option value=''>Please select...</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div className="form-group col-md-3">
<label>Year:</label>
<select className="custom-select">
<option value=''>Please select...</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div className="form-group col-md-3">
<label>Mileage:</label>
<select className="custom-select" onChange={handleChange}>
<option value=''>Please select...</option>
{getCarMileage.map((data,key) => <option value={data.value} key={key}>{data.name}</option>)}
</select>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-3">
<label>Car Trim:</label>
<select className="custom-select" onChange={handleChange}>
<option value=''>Please select...</option>
{getCarTrim.map((data,key) => <option value={data.value} key={key}>{data.name}</option>)}
</select>
</div>
<div className="form-group col-md-3">
<label>Email:</label>
<input type="email" placeholder="Email" className="custom-select" />
</div>
<div className="form-group col-md-3">
<label>Phone no:</label>
<input type="number" placeholder="Phone no" className="custom-select" />
</div>
</div>
<div className="container-buttons">
<Button className="mr-4" variant="light">
Search
</Button>
<Button variant="dark" onClick={handleReset}>Clear</Button>
</div>
</Container>
</div>
);
};
export default CarRequests;
解决方法
您做错的事情是在 handleReset 函数中，您正在处理事件并将目标值设置为空，这在理想情况下是错误的。 为了纠正它，我们需要了解流程是如何工作的，您正在使用 handleChange 函数来将值设置为您的状态。 所以为了重置它，你只需要重置状态的值。
于是代码变成这样：
const handleReset = () => {
setValue("");
}
现在这将重置您的状态变量的值，并在您的选择方法中使用您的状态变量，这将解决问题。
<select value={value}>
<option></option>
.
.
</select>
使动态字段起作用：
function App() {
const [value,setValue] = useState({});
const arr = ["hello","cra"];
const arr2 = [
{
name: "hello",id: "1",},{
name: "test2",id: "2",];
const handleChange = ({ target: { value: val,name } }) => {
setValue({ ...value,[name]: val });
};
const resetValue = () => {
setValue({});
};
console.log(value);
return (
<div id="wrapper">
<select
name="select1"
value={value.select1 || ""}
onChange={handleChange}
>
<option value=""></option>
{arr.map((val) => {
return <option value={val}>{val}</option>;
})}
</select>
<select
name="select2"
value={value.select2 || ""}
onChange={handleChange}
>
<option value=""></option>
{arr2.map(({ name,id }) => {
return <option value={id}>{name}</option>;
})}
</select>
<button onClick={resetValue}>Reset</button>
</div>
);
}否则你也可以像这样初始化状态中的值
const [value,setValue] = useState({select1: "",select2: ""});
可以进一步在您的选择标签中动态使用名称属性。
function App() {
const [value,setValue] = useState({ select1: "",select2: "" });
const arr = ["hello",[name]: val });
};
const resetValue = () => {
setValue({
select1: "",select2: "",});
};
console.log(value);
return (
<div id="wrapper">
<select name="select1" value={value.select1} onChange={handleChange}>
<option value=""></option>
{arr.map((val) => {
return <option value={val}>{val}</option>;
})}
</select>
<select name="select2" value={value.select2} onChange={handleChange}>
<option value=""></option>
{arr2.map(({ name,id }) => {
return <option value={id}>{name}</option>;
})}
</select>
<button onClick={resetValue}>Reset</button>
</div>
);
}似乎您正在尝试在 value 中存储多个值。不要在那里使用 value 一词。我已尝试将其更改为 [formValue,setFormValue]
变化 1：
let [formValue,setFormValue] = useState({
textfield1: '',dropdownfield2: ''});
Change 2 - 对于下拉更改的值：
const handlDropDownChange = (event,value) => {
setFormValue({
...formValue,['dropdownfield2']: value,});
}
更改 3 - 用于从状态映射下拉值，也使用此映射到下拉值：
formValue.dropdownfield2
更改 4 - 用于文本字段更改：
onChange={e => {
updateFieldMyForm(e);
}}
const updateFieldMyForm= e => {
setFormValue({
...formValue,[e.target.name]: e.target.value
});
};
请注意，这适用于所有文本字段 - 只需确保此文本字段的名称与 useState 语句中使用的名称相匹配，例如 - textfield1
更改 5 - 在结束/提交时重置整个内容
编辑 - 1
const handleReset = () => { setFormValue({ textfield1: "",dropdownfield2: "" }); };
价差运算符是第 2 步和第 4 步中的关键 [三点 - ...] - 如果您仍有挑战，请告诉我。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
