Question

我正在创建一个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"));

这是我的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;

有人可以帮我解决这个问题吗？我使用todoNameChangeHandler方法来更改待办事项的名称，我收到此错误：类型错误 props.todos.map不是一个函数你好 /src/Hello.js:7:21 4 |回来（ 5 | 6 |

7 | {props.todos.map（（todo，index）=＆gt; { | ^ 8 |回来（ 9 | 10 | {TODO}

Answer 1

一旦todoNameChangeHandler被调用，todoItem的类型就会从数组更改为字符串，这就是todos.map引发错误的原因。

您可以将todoNameChangeHandler功能更改为此类目标，以便定位您要更新的元素。

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

确保将数组元素的索引从<hello />传递给<App />。

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

1 个答案: