时间戳

首页 > 解决方案 > 使用受控状态更新反应表单

javascript - 使用受控状态更新反应表单

问题描述

我必须读取一个端点并将值绑定到一个表单上，但我正在努力将数组的值绑定到标签中

function App() {
  const data = [
    {
      f_name: "alicia"
    },
    {
      l_name: "johnson"
    }
  ];

  function handleChange(e) {
    console.log("e", e.target.value);
  }

  return (
    <div className="App">
      {data.map(o => (
        <input name={o} onChange={handleChange} type="text" />
      ))}
    </div>
  );
}

https://codesandbox.io/s/cocky-ives-cx5nx

如何将f_nameandl_name属性绑定到nameattr？

标签： javascriptreactjsecmascript-6

解决方案

我建议，从数据中构建一个状态，然后使其成为一个受控组件。试试下面的东西

import React, {useState} from "react";
import ReactDOM from "react-dom";

function App() {
  const data = [
    {
      f_name: "alicia"
    },
    {
      l_name: "johnson"
    }
  ];

  const [state, setState] =  useState(data.reduce((acc, val) => {
    acc = {...acc, ...val}
    return acc;
  }, {}));
  console.log(state);

  function handleChange(e, key) {
    setState({...state, [key]: e.target.value });
  }

  return (
    <div className="App">
      {Object.keys(state).map((key) => (
        <input
        key={key}
        name={key}
        value={state[key]}
        onChange={(e) => {
            handleChange(e,key);
          }
        }
          type="text"
        />
      ))}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
    <App />, rootElement
);

推荐阅读