обновленная форма реагирования с использованием контролируемого состояния

Question

Мне нужно прочитать конечную точку и связать значения с формой, но я пытаюсь связать значение массива с тегом

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_name и l_name с атрибутом name?

Answer 1

Я предлагаю создать состояние из данных, а затем сделать его контролируемым компонентом.Попробуйте что-то вроде ниже

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
);

Answer 2

В моих настройках я буду использовать регулярное выражение:

import React from "react";
import ReactDOM from "react-dom";

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 => {
        for(let key of Object.keys(o)) {
          let name = /([a-zA-Z]+_name)/g.test(key) ? o[key] : ''
          return <input name={name} onChange={handleChange} type="text"/>
        }
      })}
    </div>
  );
}

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

Answer 3

Вот простой способ добавить имя attr с помощью f_name и l_name ..

https://codesandbox.io/embed/flamboyant-cherry-tvq7s