Как изменить входное значение, которое исходит от реквизита в React?

Question

Я хочу создать ряд динамических c входов в React, мой код выглядит так:

import React, { useState } from "react";
import "./styles.css";

const style = {
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  flexWrap: "wrap"
};

const dataarray = [
  { name: "name1", value: 12 },
  { name: "name2", value: 20 },
  { name: "name3", value: 30 },
  { name: "name4", value: 40 },
  { name: "name5", value: 50 }
];

export default function App() {
  const [data, setData] = useState(dataarray);

  const onChange = e => {
    setData({ [e.target.name]: e.target.value });
  };

  const onClick = e => {
    e.preventDefault();

    console.log("data ", data);
  };

  return (
    <div className="App" style={style}>
      {dataarray.map((item, index) => {
        return (
          <div key={index} style={{ display: "flex", flexDirection: "column" }}>
            <input
              type="text"
              style={{ marginTop: "100px" }}
              value={
                data.find(localItem => localItem.value === item.value).value
              }
              name={item.name}
              onChange={onChange}
            />
          </div>
        );
      })}
      <button onClick={onClick}>Submit</button>
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Состояние по умолчанию исходит от пробников, но когда я изменяю значение любого входа, оно ломается. Это песочница демо демо

Есть ли способ изменить входное значение? признателен за любую помощь

Answer 1

вы можете просто изменить setData с setData({}) на setData() см. Песочницу демо

Answer 2

Из предоставленной вами песочницы, в строке 27:

Просто измените:

setData({inputs});

на:

setData(inputs);

это состояние из

{
  inputs: [
    // the inputs...
  ]
}

to:

[
  // the inputs...
]

Или просто не используйте массив в качестве вашего состояния

Это сделает все намного проще:

import React, { useState } from "react";
import "./styles.css";

const style = {
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  flexWrap: "wrap"
};

const initialData = {
  "name1": 12,
  "name2": 20,
  "name3": 30,
  "name4": 40,
  "name5": 5
};

export default function App() {
  const [data, setData] = useState(initialData);

  const onChange = e => {
    setData({...data, [e.target.name]: e.target.value });
  };

  const onClick = e => {
    e.preventDefault();

    console.log("data ", data);
  };

  return (
    <div className="App" style={style}>
      {Object.keys(data).map((key, index) => {
        return (
          <div key={index} style={{ display: "flex", flexDirection: "column" }}>
            <input
              type="text"
              style={{ marginTop: "100px" }}
              value={data[key]}
              name={key}
              onChange={onChange}
            />
          </div>
        );
      })}
      <button onClick={onClick}>Submit</button>
    </div>
  );
}