在输入标签中动态更改值

Question

我正在创建一个 Todo 应用。尽管我能够创建待办事项并显示它们，但我创建的每个待办事项都带有一个输入标签，该标签应该更改待办事项的名称。

我的代码：

    const Hello = props => {
      return (
        <div>
          <ul>
            {props.todos.map((todo, id) => {
              return (
                <div>
                  <p key={todo.id}>{todo}</p>
                  <input type="text" onChange={() => props.changed(event, id)} />
                </div>
              );
            })}
          </ul>
        </div>
      );
    };
    
    
    class App extends React.Component {
      state = {
        todoItem: [],
        todoText: "",
        id: 0
      };
      addTodoHanlder = event => {
        let todoValue = this.state.todoText;
        let incID = this.state.id + 1;
        this.setState({
          todoItem: [...this.state.todoItem, todoValue],
          id: incID
        });
        this.clearTodoText();
        todoValue = "";
      };
    
      clearTodoText() {
        this.setState({ todoText: "" });
      }
    
      handleChange = event => {
        this.setState({ todoText: event.target.value });
      };
    
      todoNameChangeHandler = (event, id) => {
        let todoVal = event.target.value;
        const todoIndex = this.state.todoItem.findIndex(el => {
          return el.id == id;
        });
        let todoUpdate = {...this.state.todoItem[todoIndex]}
        todoUpdate = todoVal;
        this.setState({
          todoItem: todoUpdate
        });
      };
    
      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>
        );
      }
    }
    
    ReactDOM.render(<App />, document.getElementById("root"));

<script src="http://requirejs.org/docs/release/2.2.0/minified/require.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

我只想将找到的带有 id 的 todoItem 分配给：

let todoUpdate = {...this.state.todoItem[todoIndex]} 

然后通过setState 更新它。 但是很难做到这一点，而且我遇到了错误。

TypeError
Cannot read property 'map' of undefined
hello
/src/Hello.js:7:21
   4 | return (
   5 |   <div>
   6 |     <ul>
>  7 |       {props.todos.map((todo, id) => {
     |  

             ^

另外，我不想使用reduce 方法。

Answer 1

第一个问题如下：

  todoNameChangeHandler = (event, id) => {

在这里，您将event.target 的值分配给todoVal：

    let todoVal = event.target.value;
    const todoIndex = this.state.todoItem.findIndex(el => {
      return el.id == id;
    });

    let todoUpdate = {...this.state.todoItem[todoIndex]} // <- dead code
    todoUpdate = todoVal; // <- dead code if you just used todoVal

然后在这里设置状态，用字符串覆盖this.state.todoItem：

    this.setState({
      todoItem: todoUpdate
    });
  };

如果我试试这个...

  todoNameChangeHandler = (event, id) => {
    let todoVal = event.target.value;
    const todoIndex = this.state.todoItem.findIndex(el => {
      return el.id == id;
    });
    let todoUpdate = {...this.state.todoItem[todoIndex]}
    todoUpdate.push(todoVal);
    this.setState({
      todoItem: todoUpdate
    });
  };

这会带来一系列全新的问题......

你在一个字符串上调用.map。这就是为什么你得到你得到的错误。但有时您希望它是一个对象{}，但Object 没有方法.map，因此您需要使用数组[]。首先理顺您的数据类型。希望这会有所帮助。