Как добавить атрибут Selected в опцию Select в Fable? - PullRequest
Новая
       25

Как добавить атрибут Selected в опцию Select в Fable?

0 голосов
/ 11 марта 2019

У меня есть тег выбора на моей странице: 

open Fable.Helpers.React
open Fable.Helpers.React.Props

select [] 
       [
            option [ Value "a" ] [ str "a" ]
            option [ Value "b" ] [ str "b" ]
            option [ Value "c" ] [ str "c" ]
       ]

Который переносится в: 

<select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
</select>

Теперь, скажем, я хочу, чтобы "b" выбрал атрибут.Я пытаюсь: 

option [ Value "b"; Selected true ] [ str "b" ]

И в HTML ничего не меняется.Тогда как если я, например, попробую: 

option [ Value "b"; Disabled true ] [ str "b" ]

HTML изменится соответственно: 

<option value="b" disabled="">b</option>

Так что же делать с атрибутом selected?Мне нужно получить: 

<option value="b" selected="">b</option>

Ответы [ 2 ]

1 голос
/ 27 марта 2019

как предложено @Foole, вам нужно использовать Value, чтобы установить выбранный элемент.

Вот небольшой код, позволяющий понять, как его использовать, и подключить его в программе на эльмишском языке: 

type Model =
    { Selected : string }

type Msg =
    | ChangeValue of string

let init () = { Selected = "option-2" }, Cmd.none

let update (msg:Msg) (model:Model) =
    match msg with
    | ChangeValue newValue ->
        { Selected = newValue }, Cmd.none

let renderItem (key : string) (name : string) =
    option [ Value key ]
        [ str name ]

let view model dispatch =
    select [ // Set the selected key
             Value model.Selected
             // Listen to `OnChange` event to update the `Model`
             OnChange (fun ev ->
                ChangeValue ev.target?value
                |> dispatch
             ) ]
        [ renderItem "option-1" "Apple"
          renderItem "option-2" "Pear"
          renderItem "option-3" "Orange" ]

В коде, предложенном @Foole, вы не можете изменить выбор, потому что Value "b" является статическим и вы не обновляете его.

0 голосов
/ 11 марта 2019

Добавьте его в качестве значения элемента select: 

   select [ Value "b" ] [
        option [ Value "a" ] [ str "a" ]
        option [ Value "b" ] [ str "b" ]
        option [ Value "c" ] [ str "c" ]
   ]
...