javascript - 我想清除 onClick react-select 中的选定数据

Question

我正在使用 react-select 下拉列表我的任务是什么我需要清除重置按钮的 onClick 中的选定字段意味着如果我在下拉列表中选择名称，它将在我选择的内容中可见，因此我需要清除选定的字段或清除占位符文件后将可见然后我可以再次选择字段

const [data, setData] = React.useState([]);
const [value, setValue]= React.useState('')

const handleSelectChange = (object, action) => {
    let name = action.name;
    let value = object;
    setFormData((prevFormData) => ({
      ...prevFormData,
      [name]: object,
    }));
  };

const handleSelectChangeL = (object, action) => {
    setIndex(data[object.id]);
    setUserlevel(null);
    let name = action.name;
    let value = object.value;
    setFormData((prevFormData) => ({
      ...prevFormData,
      [name]: value,
    }));
  };

const reset = () => {
    setValue('')
  };

                   <Select
                      className="drop-down"
                      options={screenType}
                      name="screen"
                      value={value}
                      onChange={handleSelectChange}
                      placeholder="Screen Type"
                      theme={(theme) => ({
                        ...theme,
                        colors: {
                          ...theme.colors,
                          text: "black",
                          primary25: "#d6fdf7",
                          primary: "#0bb7a7",
                          primary50: "#d6fdf7",
                        },
                      })}
                    ></Select>

                    <Select
                      className="drop-down"
                      options={data?.map((data, index) => ({
                        value: data.username,
                        label: data.username,
                        id: index,
                      }))}
                      name="user"
                      value={data.username}
                      onChange={handleSelectChangeL}
                      placeholder="User Name"
                      theme={(theme) => ({
                        ...theme,
                        colors: {
                          ...theme.colors,
                          text: "black",
                          primary25: "#d6fdf7",
                          primary: "#0bb7a7",
                          primary50: "#d6fdf7",
                        },
                      })}
                    ></Select>

                    <button
                        className="dash-button-1"
                        type="submit"
                        variant="contained"
                        onClick={reset}
                      >
                        Reset
                      </button>

标签： javascriptreactjs

Answer 1

您将不得不在标签中切换valueprop的状态。<Select>您可以定义一个状态，const [value, setValue]= useState('')并根据onChange函数更改其值。

您的重置功能可能是这样的：

const reset = () => {
    setValue('')
  };

这将再次重置 Select Tag 的值。