reactjs - 如何在 React 中编辑输入？

问题描述

我可以专注于输入并修改文本。但是当我按下回车时，文本根本没有改变。我把代码留在后面。我有一份待办事项清单和一份已完成清单。当我编辑待办事项列表中的文本并按 Enter 键时，修改后的值会出现在我的控制台中，但是当我将待办事项发送到完成列表时返回原始值/文本

import React from "react";
import "../list.css";

class List extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
    this.state = {
      isEditing: false,
      textInput: this.props.value,
    };
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    this.textInput.current.focus();
  }

  // handleOnSubmit(event) {
  // event.preventDefault();
  // let aa = this.state.textInput;
  // if (aa !== "") {
  //   this.setState({ items: [...this.props.items, aa] });
  //   console.log(aa);
  // }
  // }

  // componentDidUpdate() {
  //   this.handleOnSubmit();
  // }

  onChange = (event) => {
    // const textInput = this.textInput;
    this.setState({ textInput: event.target.value });
  };

  componentDidMount() {
    const editingState = true;
    if (!this.state.isEditing) {
      this.setState({ isEditing: editingState });
    }
  }

  render() {
    return (
      <ul>
        {this.props.title}
        {this.props.items.map((listItem, index) => {
          return (
            <li id="list-item" key={index}>
              <form onSubmit={(event) => this.onEdit(event)}>
                <input
                  type="text"
                  ref={this.textInput}
                  onChange={(event) => {
                    this.onChange(event);
                  }}
                  defaultValue={listItem}
                />
              </form>
              <button onClick={() => this.props.onAction(listItem)}>
                {this.props.label}
              </button>
              <button onClick={() => this.props.onDeleteItem(listItem)}>
                Delete
              </button>
              <button onClick={() => this.props.onSortItem(listItem)}>
                Sort
              </button>
              <button onClick={() => this.focusTextInput()}>Edit</button>
            </li>
          );
        })}
      </ul>
    );
  }
}

export default List;

import React from "react";
import Form from "./components/Form";
import List from "./components/List";
import "./App.css";

class App extends React.Component {
  state = {
    todoList: [],
    doneList: [],
  };

  addTodo = (value) => {
    if (value !== "") {
      this.setState({ todoList: [...this.state.todoList, value] });
    }
  };

  handleTodo = (value) => {
    const todoList = this.state.todoList.filter(
      (listValue) => listValue !== value
    );
    const doneList = [...this.state.doneList, value];
    this.setState({ todoList, doneList });
  };

  handleDone = (value) => {
    const doneList = this.state.doneList.filter(
      (listValue) => listValue !== value
    );
    const todoList = [...this.state.todoList, value];
    this.setState({ todoList, doneList });
  };

  deleteItem = (value) => {
    const doneList = this.state.doneList.filter(
      (listValue) => listValue !== value
    );
    const todoList = this.state.todoList.filter(
      (listValue) => listValue !== value
    );
    this.setState({ doneList, todoList });
  };

  sortItem = (value) => {
    const todoList = [value].concat(
      this.state.todoList.filter((item) => item !== value)
    );
    this.setState({ todoList });
  };

  editText = (event) => {
    event.preventDefault();
    let aa = this.props.textInput;
    if (aa !== "") {
      this.setState({ todoList: [...this.state.todoList, aa] });
      console.log(aa);
    }
  };

  render() {
    return (
      <div className="App">
        <Form onSubmit={this.addTodo} />
        <List
          onDeleteItem={this.deleteItem}
          onAction={this.handleTodo}
          items={this.state.todoList}
          onSortItem={this.sortItem}
          onEdit={this.editText}
          title="Todo"
          label="Done"
        />
        <List
          onDeleteItem={this.deleteItem}
          onAction={this.handleDone}
          items={this.state.doneList}
          title="Done"
          label="Todo"
        />
      </div>
    );
  }
}

export default App;

标签： reactjsformsinputedit

快速查看了您的codesandbox，我认为问题出在您的List组件中。在那里，您映射了待办事项并提供了index作为键。我怀疑这就是问题所在。

React 使用这个键来优化渲染。这就是 React 如何快速找出哪些组件已更改、添加或删除的方式。当它是一个静态列表时， idx 很好，因为索引零将始终指向同一个组件。但是对于像您这样的流动列表，索引零可能不会指向相同的组件，这使得事情更难遵循。不过，作为最佳实践，使用唯一键可能总是最好的。

为了让它工作，我只使用了这个todo名字，但如果用户能够为多个 todos 使用相同的名字，你可能应该想出别的办法。

您可以在此处阅读有关密钥的更多信息：https ://reactjs.org/docs/lists-and-keys.html

reactjs - 如何在 React 中编辑输入？

问题描述

解决方案

推荐阅读