Javascript 如何处理可编辑的多个输入

我在react中将动态值添加到多个输入中，然后我尝试编辑它，但它根本不可编辑。代码如下：

class Hotels extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { id: 1, hotel: { name: "Sentido" } },
        { id: 2, hotel: { name: "Maris" } },
        { id: 3, hotel: { name: "Orka" } },
        { id: 4, hotel: { name: "Resort " } },
        { id: 5, hotel: { name: "Green " } },
        { id: 6, hotel: { name: "Maris" } },
        { id: 7, hotel: { name: "Nature " } },
        { id: 8, hotel: { name: "Diamond " } },
      ],
    };
  }

  render() {
    return data.map((item, i) => (
      <input
        name={`hotel__${i}.name`}
        onChange={this.handleChange}
        value={item.hotel.name}
        type="text"
      />
    ));
  }
  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value,
    });
  };
}
ReactDOM.render(<Hotels></Hotels>, document.getElementById("app"));

class.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[
{id:1，酒店：{name:“Sentido”}，
{id:2，酒店：{name:“Maris”}，
{id:3，酒店：{name:“Orka”}，
{id:4，酒店：{name:“Resort”}，
{id:5，酒店：{name:“Green”}，
{id:6，酒店：{name:“Maris”}，
{id:7，酒店：{name:“Nature”}，
{id:8，酒店：{name:“Diamond”}，
],
};
}
render（）{
返回数据.map（（项目，i）=>(
));
}
handleChange=（事件）=>{
这是我的国家({
[event.target.name]：event.target.value，
});
};
}
ReactDOM.render（，document.getElementById（“app”）；

---

我没有使用defaultValue属性，我添加了一个onChange事件，但它不起作用

您的输入名称不正确。您应该使用

item.hotel.name

render() {
    return data.map((item, i) => (
      <input
        name={item.hotel.name}
        onChange={this.handleChange}
        value={item.hotel.name}
        type="text"
      />
    ));
  }

记住将

this.handleChange=this.handleChange.bind（this）

添加到构造函数中

这是我的解决方案

export default function App() {
  const [data, setData] = useState([
    { id: 1, hotel: { name: "Sentido" } },
    { id: 2, hotel: { name: "Maris" } },
    { id: 3, hotel: { name: "Orka" } },
    { id: 4, hotel: { name: "Resort " } },
    { id: 5, hotel: { name: "Green " } },
    { id: 6, hotel: { name: "Maris" } },
    { id: 7, hotel: { name: "Nature " } },
    { id: 8, hotel: { name: "Diamond " } }
  ]);

  const handleChange = (event, index) => {
    console.log(index);

    data[index].hotel.name = event.target.value;
    setData([...data]);
  };

  return (
    <div className="App">
      {data.map((item, index) => (
        <input
          key={item.id}
          name={`hotel__${index}.name`}
          onChange={(event) => handleChange(event, index)}
          value={item.hotel.name}
          type="text"
        />
      ))}
    </div>
  );
}

导出默认函数App（）{
const[data，setData]=useState([
{id:1，酒店：{name:“Sentido”}，
{id:2，酒店：{name:“Maris”}，
{id:3，酒店：{name:“Orka”}，
{id:4，酒店：{name:“Resort”}，
{id:5，酒店：{name:“Green”}，
{id:6，酒店：{name:“Maris”}，
{id:7，酒店：{name:“Nature”}，
{id:8，酒店：{name:“Diamond”}
]);
常量handleChange=（事件、索引）=>{
控制台日志（索引）；
数据[索引].hotel.name=event.target.value；
setData（[…data]）；
};
返回(
{data.map（（项目，索引）=>(
handleChange（事件、索引）}
值={item.hotel.name}
type=“text”
/>
))}
);
}

---

仅仅更新索引不是件简单的事吗

class.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[
{id:1，酒店：{name:“Sentido”}，
{id:2，酒店：{name:“Maris”}，
{id:3，酒店：{name:“Orka”}，
{id:4，酒店：{name:“Resort”}，
{id:5，酒店：{name:“Green”}，
{id:6，酒店：{name:“Maris”}，
{id:7，酒店：{name:“Nature”}，
{id:8，酒店：{name:“Diamond”}，
],
};
}
render（）{
返回此.state.data.map（（项，i）=>(
这个.handleChange（e，i）}
值={item.hotel.name}
type=“text”
/>
));
}
handleChange=（事件、酒店索引）=>{
让data=[…this.state.data]；
数据[hotelIndex].hotel.name=event.target.value；
this.setState（{data}）；
};
}
ReactDOM.render（，document.getElementById（“app”）
您的项目有一个
id
属性，因此不需要使用数组索引，例如
name={`hotel\uuuu${i}.name`
我建议改用
item.id
。id只是标识符的缩写，用来标识资源

排除此建议后，您必须将资源标识符传递给
handleChange
，以确定要更改的资源。这可以通过几种方式实现

将事件旁边的索引或项目id标识符传递给
handleChange

onChange={(event) => this.handleChange(event, item.id)}

// ...

handleChange = (event, id) => {
  const name = event.target.value;
  this.setState((previous) => ({
    data: previous.data.map((item) => {
      if (item.id != id) return item;
      return { ...item, hotel: { name } };
      //    add `...item.hotel` ^ if hotel contains more attributes
      //    than just the name
    })
  }));
};


这一个与第一个解决方案有很多共同点。您可以使用已提供的id创建当前版本的
handleChange

onChange={this.handleChange(item.id)}

// ...

handleChange = (id) => (event) => {
  // ...
};


更新状态的解决方案不止这两种，但它们可能是最容易掌握的


class.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[
{id:1，酒店：{name:“Sentido”}，
{id:2，酒店：{name:“Maris”}，
{id:3，酒店：{name:“Orka”}，
{id:4，酒店：{name:“Resort”}，
{id:5，酒店：{name:“Green”}，
{id:6，酒店：{name:“Maris”}，
{id:7，酒店：{name:“Nature”}，
{id:8，酒店：{name:“Diamond”}，
],
};
}
render（）{
返回此.state.data.map（（项）=>(
));
}
handleChange=（id）=>（事件）=>{
const name=event.target.value；
此.setState（（上一个）=>({
数据：previous.data.map（（项目）=>{
如果（item.id！=id）返回项目；
返回{…项目，酒店：{name}；
//添加“…项目.酒店”^如果酒店包含更多属性
//不仅仅是名字
})
}));
};
}
ReactDOM.render（，document.getElementById（“app”）

谢谢@Someone Special的回答，是的，这是对的，但我忘记了在本期中输入名称必须不同，我必须为每个输入使用不同的名称，因此我不能使用此句柄更改？这里不需要使用map遍历数组。另外，当您将函数编写为箭头函数时，不需要绑定它。React建议不要改变状态<代码>数据[index].hotel.name=event.target.value
改变状态<代码>[…数据]

创建浅层副本，嵌套对象通过引用进行复制，而不是实际复制。即使需要进行深度复制，也要在创建副本之前改变状态。@3limin4t0r:你说得对。但在这种情况下我们该怎么办？只需在变异前复制一份。React建议不要变异状态，这就是

数据[hotelIndex].hotel.name=event.target.value

所做的。这是可行的，但变异状态很容易导致bug。例如，如果要将此.data传递给纯组件，它将永远不会更新，因为项数组始终使用相同的引用。@3limin4t0r是的，您是对的。我做了correction@3limin4t0r，有什么办法吗

onChange={this.handleChange(item.id)}

// ...

handleChange = (id) => (event) => {
  // ...
};