Question

我具有相同的选择和清除按钮。我的选项来自JSON，并由（.map）呈现。

默认情况下，我需要选择第一个选项（选项[0] ）。

我已经做到了，但是我不知道清除按钮如何保持相同的结果。

我的js：

//Change
 const [shopName, setShop] = React.useState(0);
  const handleChange = (event) => {
    setShop(event.target.value);
  };
//Select
  const [shops, setShops] = React.useState([]);
  React.useEffect(() => {
    axios.post('https://xxx')
      .then(response => {
        let miseList = JSON.parse(response.data.body);
        setShops(miseList)
        setShop(miseList[0].TEN_CD);
      })
      .catch(error => console.log(error));
  }, [setShops]);

  var options = shops.map(
    (n) => (
      <option value ={n.TEN_CD}>
          {n.TEN_CD + "：" + n.TEN_NM}
      </option>
    )
  );
//Clear
const clearButton = () => {
    setShop(0);
};

return (
<div className="cbSimpleSelect">
  <Select className="selectEmpty" id="idShop" value={shopName} onChange={handleChange}>
    {options}
  </Select>
</div>
<div class="btClear">
  <Button variant="contained" color="primary" onClick={clearButton}>
     Clear
  </Button>
</div>)

我的JSON：

0: {TEN_CD: "0100", KANRI_TEN_CD: "0100", JHIN_TEN_CD: "0100", TEN_NM: "店あいうえお１１", KANRI_TEN_NM: "店あいうえお１１", …}
1: {TEN_CD: "0200", KANRI_TEN_CD: "0200", JHIN_TEN_CD: "0200", TEN_NM: "店あいうえお１２", KANRI_TEN_NM: "店あいうえお１２", …}
2: {TEN_CD: "0201", KANRI_TEN_CD: "0200", JHIN_TEN_CD: "0200", TEN_NM: "店あいうえお１３", KANRI_TEN_NM: "店あいうえお１３", …}
3: {TEN_CD: "0202", KANRI_TEN_CD: "0200", JHIN_TEN_CD: "0200", TEN_NM: "店あいうえお１４", KANRI_TEN_NM: "店あいうえお１４", …}
4: {TEN_CD: "0300", KANRI_TEN_CD: "0300", JHIN_TEN_CD: "0300", TEN_NM: "店あいうえお１５", KANRI_TEN_NM: "店あいうえお１５", …}

length: 4

任何帮助，谢谢。

默认情况下如何获取第一选项

0 个答案: