Javascript 如何动态更改输入标记的值？

我正在创建一个待办事项应用程序。虽然我能够创建todo并显示它们，但现在我为每个todo创建了一个输入标记，该标记应该会更改todo的名称

以下是我的容器组件index.js：

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";

class App extends Component {
  state = {
    todoItem: [],
    todoText: ""
  };
  addTodoHanlder = event => {
    let todoValue = this.state.todoText;
    this.setState({
      todoItem: [...this.state.todoItem, todoValue]
    });
    this.clearTodoText();
    todoValue = "";
  };

  clearTodoText() {
    this.setState({ todoText: "" });
  }

  handleChange = event => {
    this.setState({ todoText: event.target.value });
  };
  todoNameChangeHandler = event => {
    let todoVal = event.target.value;
    this.state.todoItem.map(todo => {
      this.setState({
        todoItem: todoVal
      });
    });
  };

  render() {
    return (
      <div>
        <input
          type="text"
          placeholder="Enter Todo"
          value={this.state.todoText}
          onChange={this.handleChange}
        />
        <button onClick={this.addTodoHanlder}>AddTodo</button>
        <Hello
          todos={this.state.todoItem}
          changed={this.todoNameChangeHandler}
        />
      </div>
    );
  }
}
render(<App />, document.getElementById("root"));

import React，{Component}来自“React”；
从“react dom”导入{render}；
从“/Hello”导入Hello；
类应用程序扩展组件{
状态={
todoItem:[]，
todoText:“
};
AddToDoHander=事件=>{
让todoValue=this.state.todoText；
这是我的国家({
todoItem:[…this.state.todoItem，todoValue]
});
这个.cleartototext（）；
todoValue=“”；
};
cleartototext（）{
this.setState（{todoText:“}）；
}
handleChange=事件=>{
this.setState（{todoText:event.target.value}）；
};
TodonaMechanageHandler=事件=>{
让todoVal=event.target.value；
this.state.todoItem.map（todo=>{
这是我的国家({
todoItem:todoVal
});
});
};
render（）{
返回(
阿多多
);
}
}
render（，document.getElementById（“根”））；

下面是要显示TODO的my Hello.js组件：

import React from "react";

const hello = props => {
  return (
    <div>
      <ul>
        {props.todos.map((todo,index) => {
          return (
          <div>
            <p key={index}>{todo}</p>
            <input type="text" onChange={props.changed} />
          </div>
  )
        })}
      </ul>
    </div>
  );
};

export default hello;

从“React”导入React；
常量hello=props=>{
返回(

{props.todos.map（（todo，index）=>{
返回(
{todo}
)
})}

);
};
导出默认hello；

有人能帮我解决这个问题吗？ 我使用ToDonaMechanageHandler方法更改了todos的名称，出现以下错误： 打字错误 props.todos.map不是函数 你好 /src/Hello.js:7:21 4 |返回( 5 | 6|

7 |{props.todos.map（（todo，index）=>{ | ^ 8 |返回( 9 | 10 |{todo}

---

一旦调用了

todoNameChangeHandler

，

todoItem

的类型就从数组更改为字符串，这就是

todos.map

抛出错误的原因

您可以将

todonaemechangehandler

函数更改为类似这样的函数，以便只针对要更新的元素

todoNameChangeHandler = (event, targetIndex) => {
  let todoVal = event.target.value;
  this.setState(prevState => ({
    todoItem: prevState.todoItem.reduce(
      (accum, current, currentIndex) => {
        if (currentIndex === targetIndex) { // will look for the matching index
          return [...accum, todoVal]; // then replace the old value with the new value
        } else {
          return [...accum, current]; // otherwise just keep the old one
        }
      },
      []
    )
  }));
}

---

只需确保将数组元素的索引从

传递到

为什么

TodonaMechanageHandler

具有带状态的循环；因为todoItem是数组，在setStateHi之后将更改为字符串，谢谢..这工作非常好..但是您能建议一些替代方法吗..我的意思是没有reduce的任何东西功能。