【问题标题】：How to change input value which is coming from props in React?如何更改来自 React 中道具的输入值？
【发布时间】：2020-01-28 00:55:07
【问题描述】：

我想在 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>

默认状态来自 probs，但是当我更改任何输入的值时，它会中断。这是沙盒演示demo

有什么方法可以改变输入值吗？感谢任何帮助

【问题讨论】：

标签： javascript reactjs ecmascript-6 redux

【解决方案1】：

从您提供的沙盒中，第 27 行：

简单的改变：

setData({inputs});

到：

setData(inputs);

这使得状态来自

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

到：

[
  // 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>
  );
}

【讨论】：