我如何迭代、動態加載我的表單輸入元素，然后在React的表單提交上檢索輸入值？-有解無憂

我正在創建一個示例動態表單，我想根據包含不同輸入元素（如“文本框”、“文本區域”、“下拉串列”、“無線電輸入”等）的 JSON 加載我的輸入元素。 我創建一個 JSON 檔案來獲取它，如下所示：

[ 
    {
        "id": "1",
        "type": "textbox",
        "text": "",
        "required": true,
        "label": "lbl"
    },
    {
        "id": "2",
        "type": "textbox",
        "text": "",
        "required": true,
        "label": "Specification Name"
    },
    {
        "id": "3",
        "type": "dropdown",
        "text": "",
        "required": true,
        "label": "Specification Reviewed",
        "options":["a","2"]
    },
    {
        "id": "4",
        "type": "dropdown",
        "text": "",
        "required": true,
        "label": "Action Required",
        "options":["1","2","3"]
    },
    {
        "id": "5",
        "type": "textbox",
        "text": "",
        "required": true,
        "label": "lbl"
    }
]

我有一個應用程式基礎組件，它呼叫另一個名為“輸入”的組件，該組件具有我的布局，我通過該組件檢索元素。我可以在此處拉出文本框和下拉選單，但無法遍歷下拉選擇。我不知道該怎么做。

這是我的 App Base 解決方案：在這里，我使用映射概念從 JSON 本地檔案中獲取資料并將其分配給輸入值，然后我在表單標記內的回傳中使用這些值。

我能夠動態列出我所有的輸入元素
但我無法從我的 JSON 檔案中獲取下拉值

    function App() {
      const [inputObject, setInputObject] = React.useState(inputData)
      const inputvalues = inputObject.map( input => {
        return (
            <Input 
                    key={input.id}
                    input={input}
                    />
        )
    })
    
    const handleSubmit = (event) => {
      event.preventDefault();
    }
    
      return (
        <div className="App">
          <header className="App-header">
            <form>
            <div>
              {inputvalues}
            </div>
            <input type="submit" value="submit" onClick={handleSubmit} />
          </form>
          </header>
        </div>
      );
    }

export default App;

而且，這是我的 input.js 組件檔案：這基本上布置了輸入元素，我使用 Props 獲取資料，但我無法獲取下拉選擇值，因為我需要以某種方式在每個下拉元素中迭代。

export default function Input(props) {
const [state, setState] = React.useState({
    textBoxValue: ""
  })

  function handleChange(evt) {
    setState({ [props.input.id] : evt.target.value });
  }
   if (props.onChange) {
     props.onChange(state);
      }
return (
    <div>
        <label>{props.input.type}: </label>
        {props.input.type === "textbox" && <input name={props.input.type} placeholder={props.input.type} id={props.input.id} value={state.firstName} onChange={handleChange}/>}
        {props.input.type === "dropdown" && <select name={props.input.type} id={props.input.id}>
            <option value={props.input.options}></option></select>
}</div>)}

請幫助我或指導我，因為我仍在學習 React。除此之外，我以后如何在 FORM SUBMIT 上獲得所有輸入值？為此，我嘗試添加一個handleChange事件來查看資料是否通過，但它不起作用。

非常感謝您！

uj5u.com熱心網友回復：

您可能會發現Yup 和 Formik很有用。
使用 Yup，您可以將型別包含到欄位以及諸如是否需要欄位之類的事情。
鏈接的示例應該讓您朝著正確的方向前進。

編輯 - （在 OP 評論之后）

因此，在不使用任何外部庫的情況下，您可以執行以下操作：

// Get a hook function
const {useState} = React;

const INPUTS = [ 
  {
      "id": "1",
      "type": "textbox",
      "value": "",
      "required": true,
      "label": "lbl"
  },
  {
      "id": "2",
      "type": "textbox",
      "value": "",
      "required": true,
      "label": "Specification Name"
  },
  {
      "id": "3",
      "type": "dropdown",
      "value": "",
      "required": true,
      "label": "Specification Reviewed",
      "options":["a","2"]
  },
  {
      "id": "4",
      "type": "dropdown",
      "value": "",
      "required": true,
      "label": "Action Required",
      "options":["1","2","3"]
  },
  {
      "id": "5",
      "type": "textbox",
      "value": "",
      "required": true,
      "label": "lbl"
  }
];

const convertArrayToObject = (array, key, targetKey) => {
  const initialValue = {};
  return array.reduce((obj, item) => {
    return {
      ...obj,
      [item[key]]: item[targetKey],
    };
  }, initialValue);
};

const Form = () => {
  const [formState, setFormState] = useState(
    convertArrayToObject(INPUTS, "id", "value")
  );
  const handleChanges = (keyName) => (e) => {
    const newValue = e.target.value
    setFormState(prev => ({
      ...prev,
      [keyName]: newValue
    }));
  }
  
  console.log(formState);
  
  return (
    <form>
      {INPUTS.map((input, inputIndex) => (
        <div key={inputIndex}>
          <label htmlFor={input.id}>{input.label}</label>
          {input.type === "dropdown" && input.options ? (
              <select onChange={handleChanges(input.id)}>
                {input.options.map((option, optionIndex) => (
                  <option
                    key={optionIndex}
                    value={option}>{option}
                  </option>
                ))}
              </select>
            ) : (
            <input
              id={input.id}
              name={input.id}
              required={input.required}
              type={input.type}
              onChange={handleChanges(input.id)}
              value={formState.value}
              />
          )}
        </div>
      ))}
    </form>
  );
}


ReactDOM.createRoot(
  document.getElementById("root")
).render(
  <Form />
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

撰寫的一些代碼背后的一些推理：

React 希望key在映射物件時傳遞一個 prop（因此我為每個包裝器div和option元素添加了它。
我映射了INPUTS物件以構建初始狀態，然后創建了一個onChange柯里化的處理程式，這樣它就足夠通用，可以在任何地方使用
我只是在演示您更新表單時所做console.log的formState更改。

超過

如果適用或值得考慮添加自動完成

如果您打算將資料提交給 API，您當然需要某種提交按鈕。

<button type="submit">Submit</button

但我會把它留給你作為練習......

希望這可以幫助！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/535694.html

標籤：反应JSON形式反应道具

上一篇：jquery不等待函式的回傳值

下一篇：錯誤：React.Children.onlyexpectedtoreceiveasingleReactelementchildinreactnative