bugfix> javascript > 投稿

通常のhtml要素の場合、フォームを介してその要素の値を取得できます。

function handleSubmit(event) {
    event.preventDefault()
    const formData = new FormData(e.target)
    console.log(formData.get("test"))
    // logs the value of the html element with the name "test"
  }
<form onSubmit={handleSubmit}>
    <input name="test" />
    <button type="submit">Submit</button>
</form>

フォームは、フォームの送信時に入力内にあるものすべての値をキー「テスト」に割り当てます。

私の質問:この機能をセマンティックUIドロップダウンで機能させる方法はありますか?

以下は理想的には機能すると思うものですが、コンポーネントが他の要素のラッパーであるため、機能しないことはわかっています。

function handleSubmit(event) {
    event.preventDefault()
    const formData = new FormData(e.target)
    console.log(formData.get("test"))
    // logs the value of the html element with the name "test"
  }
<form onSubmit={handleSubmit}>
    <Dropdown name="test" selection options={
        [{key: '1', text: 'text', value: '1'}]
      }/>
    <button type="submit">Submit</button>
</form>

フォームの送信時に、そのドロップダウンで選択された値はすべて、formDataの「test」と呼ばれるキーに入れられます。値が選択されていない場合、キー「test」に未定義の値が与えられます。

これは可能ですか?基本的なhtmlセレクターを使用する別の回避策がありますが、すでに記述されているコードの多くを変更したくありません。

回答 1 件
  • はい。ただし、ドロップダウンコンポーネントを分解する必要があります。

    const [open, setOpen] = useState(false)
    <Dropdown
        trigger={<Button onClick={() => setOpen(true)}>Open</Button>}
        onClose={() => setOpen(false)}
        icon={null}
        open={open}
        simple
      >
        <Dropdown.Menu>
          ... add the options with the "name" tag ...
        </Dropdown.Menu>
      </Dropdown>
    
    

あなたの答え