reset/clear select 在 select 中编辑值 - 在 React.js 中单击按钮的选项？

Question

我正在研究 React，我有几个下拉菜单和文本字段，我想在其中 clear/reset selected 来自 select 选项和文本字段的值当我点击清除按钮时。我尝试了一些逻辑，但它不起作用。有人能帮我吗？我创建了一个名为 "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;

Answer 1

您做错的是在处理事件的 handleReset 函数中，您将目标值设置为空，这在理想情况下是错误的。为了更正它，我们需要了解流程是如何工作的，您正在使用 handleChange 函数将值设置为您的状态。因此，为了重置它，您只需要重置状态值。

所以代码变成这样：

const handleReset = () => {
    setValue("");   
}

现在这将重置您的状态变量的值，并在您的 select 方法中使用您的状态变量，这将解决问题。

<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: ""});

可以进一步在您的 select 标签中动态使用名称属性。

function App() {
  const [value, setValue] = useState({ select1: "", select2: "" });
  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({
      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>
  );
}

Answer 2

您似乎正试图在 value 中存储多个值。不要在那里使用价值这个词。我试图将其更改为 [formValue, setFormValue]

变化一：

let [formValue, setFormValue] = useState({
textfield1: '',
dropdownfield2: ''});

更改 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 - 在 end/submission

重置整个内容

编辑 - 1

const handleReset = () => { setFormValue({ textfield1: "", dropdownfield2: "" }); };

展开运算符是第 2 步和第 4 步的关键 [三点 - ...] - 如果您仍有挑战，请告诉我。

reset/clear select 在 select 中编辑值 - 在 React.js 中单击按钮的选项？

reset/clear selected values in select-option on button click in React.js?

javascript

reactjs

dropdown

select-options