reactjs - 就地编辑列表项（React）

Question

基于简单的待办事项应用程序，我想了解如何就地修改列表项的文本。列表项包含 2 个 div，第一个包含待办事项的文本，第二个包含图标（删除、编辑）。我尝试在 li 文件 ListItem.js 中有条件地渲染第一个 div 或输入，但这对我不起作用。

应用程序.js

class App extends React.Component {
  state = {
    items: [],
    currentValue: '',
    clearValue: false
  };

  submitFormHandler = event => {
    event.preventDefault();
    if (this.state.currentValue === '') return;
    const updatedItems = [...this.state.items];
    if (
      updatedItems.filter(udtItem => udtItem.value === this.state.currentValue)
        .length === 0
    ) {
      updatedItems.push({
        id: uuidv4(),
        value: this.state.currentValue,
        completed: false
      });
    }
    this.setState({ items: updatedItems, clearValue: true });
    localStorage.setItem('todos', JSON.stringify(updatedItems));
  };

  changeInputHandler = event => {
    this.setState({
      currentValue: event.target.value,
      clearValue: false
    });
  };

  deleteItem = id => {
    const updatedItems = [...this.state.items].filter(item => item.id !== id);
    this.setState({ items: updatedItems });
    localStorage.setItem('todos', JSON.stringify(updatedItems));
  };

  editItem = (event, id) => {
    event.stopPropagation();
    //do something here
  };

  deleteAll = () => {
    this.setState({ items: [] });
    localStorage.removeItem('todos');
  };

  componentDidMount() {
    let todos = localStorage.getItem('todos');
    if (todos) {
      this.setState({ items: JSON.parse(todos) });
    }
  }

  render() {
    const itemList = this.state.items.map(item => (
      <ListItem
        key={item.id}
        data={item}
        deleted={this.deleteItem}
        edited={this.editItem}
      ></ListItem>
    ));
    return (
      <div className="App">
        <img src={trashIcon} alt="Delete" onClick={this.deleteAll} />
        <header className="header">To-Do List</header>
        <div className="items">
          <ul>{itemList}</ul>
        </div>
        <form onSubmit={this.submitFormHandler}>
          <Input
            val={this.state.currentValue}
            changed={e => this.changeInputHandler(e)}
            clear={this.state.clearValue}
          />
        </form>
      </div>
    );
  }
}
export default App;

ListItem.js

class ListItem extends Component {
  state = {
    crossCheck: false,
    hidden: true
  };

  toggleCrossCheck = () => {
    const storageItems = JSON.parse(localStorage.getItem('todos'));
    storageItems.forEach(item => {
      if (item.id === this.props.data.id) {
        item.completed = !item.completed;
        this.setState({ crossCheck: item.completed });
      }
    });
    localStorage.setItem('todos', JSON.stringify(storageItems));
  };

  componentDidMount() {
    this.setState({ crossCheck: this.props.data.completed });
  }

  render() {
    let classList = 'icon-container';
    if (!this.state.hidden) classList = 'icon-container open';

    return (
      <li
        className={this.state.crossCheck ? 'item cross-check' : 'item'}
        onClick={this.toggleCrossCheck}
        onMouseEnter={() => this.setState({ hidden: false })}
        onMouseLeave={() => this.setState({ hidden: true })}
      >
        <div className="item-text">{this.props.data.value}</div>
        <div className={classList}>
          <Icon
            iconType={trashIcon}
            altText="Delete"
            clicked={() => this.props.deleted(this.props.data.id)}
          ></Icon>
          <Icon
            iconType={editIcon}
            altText="Edit"
            clicked={event => this.props.edited(event, this.props.data.id)}
          ></Icon>
        </div>
      </li>
    );
  }
}
export default ListItem;

标签： reactjs