Как динамически добавлять предметы в select? - PullRequest
Новая
       43

Как динамически добавлять предметы в select?

0 голосов
/ 17 февраля 2020

Не могли бы вы сказать мне, как динамически добавлять элементы в select в реакции?

Я получаю ответ от сервера (имя, метка и т. Д. c). Например, я просто высмеиваю свой ответ и после двух во-вторых, я получаю это.

В моем примере у меня есть два поля выбора или раскрывающийся список. Первое раскрывающееся меню имеет значение «один» и «два» (которые задаются как опции в json).

В json есть еще одна опция dependentField, это означает, что поле зависит от другого поля (упомянутое значение является зависимым). В моем примере second поле зависит от первого поля.

Итак значение второго поля выбора или раскрывающегося списка будет ["three", "four"], если первый блок выбора или выпадающее значение id one.

Таким образом, значение второго поля выбора или раскрывающегося списка будет ["five", "six"], если первый блок выбора или id раскрывающегося значения two.

Так что мне нужно watch значение поля, указанное в hook form

https://react-hook-form.com/get-started

Можем ли мы динамически добавлять опции

вот код

https://codesandbox.io/s/stoic-benz-lxb8i

useEffect(() => {
    console.log("====");
    (async () => {
      var a = await FETCH_API();
      console.log("sssss");
      setState(a);
      console.log(a);
    })();
  }, []);


const getForm = () => {
    try {
      return state.map((i, index) => {
        switch (i.type) {
          case "text":
            return (
              <div key={index}>
                <label>{i.label}</label>
                <input type="text" ref={register()} name={i.name} />
              </div>
            );

          case "select":
            if (i.watch) {
              watch(i.name, null);
            }
            return (
              <div key={index}>
                <label>{i.label}</label>
                <select name={i.name} ref={register()}>
                  {i.options.map((i, idx) => {
                    return (
                      <option key={idx} value={i}>
                        {i}
                      </option>
                    );
                  })}
                  /
                </select>
              </div>
            );
          default:
            return <div>ddd</div>;
        }
      });
      return <div>ddd</div>;
    } catch (e) {}
  };

Я не хочу делать какие-либо гаркодинги, как 

useEffect(()=>{


},[‘first’])

можем мы смотреть или добавлять useeffect динамически, чтобы наблюдать изменения динамически?

Любое обновление

1 Ответ

2 голосов
/ 17 февраля 2020

это два простых выбора. Где выбор первого зависит от секунды 

import React,{useState, useEffect} from "react"

const App = () => {

  const [state,setState] = useState({
    option1:["one","two"],
    option2: []
  })

  useEffect(()=> {
    (async () => {
      var a = await FETCH_API();
      console.log("sssss");
      setState({
        ...state,
        option2: a
      });
      console.log(a);
    })();
  },[state.option1])

  return(
    <div>
      <select>
        {
          state.option1.map((i,idx)=>{
            return(
              <option key={idx} value={i}>
              {i}
              </option>
            )
          })
        }

      </select>
      <select>
        {
          state.option2.map((i,idx)=>{
            return(
              <option key={idx} value={i}>
              {i}
              </option>
            )
          })
        }

      </select>
    </div>
  )
}

export default App
...