Question

我正在React中制作待办事项。我在某个时候陷入困境我映射数组中的项目，并将其显示在无序列表中。我尝试使用过滤功能，从阵列中删除已删除的项目。

我认为我的代码中的问题可以在那里，我传递事件对象但指向按钮，而不是列表项。

我怎样才能在React中做到这一点？你可以在下面找到我的代码。
也可以在提交项目后清除输入字段。

import React, { Component } from 'react';

class ToDoList extends Component {
  constructor(props) {
    super(props);
    this.state = {list: [], items: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleRemove = this.handleRemove.bind(this);
  }

  handleChange(event) {
    this.setState({items: event.target.value})
    console.log(event.target.value);
  }

  handleSubmit(event) {
    this.setState({ list: [...this.state.list, this.state.items]})
    event.preventDefault();
  }

  handleRemove(event) {
    const filteredArray = this.state.list.filter(item => item !== event.target.value)
    this.setState({list: filteredArray});
    console.log(event.target);
  }

  render() {
    return (
    <div>
      <form onSubmit={this.handleSubmit}>
        <label>
          <input
            type="text" 
            value={this.state.value}
            onChange={this.handleChange} />
        </label>
        <input
          onClick={this.handleSubmit}
          type="submit"
          value="Submit" />
      </form>
      <ul>
        {this.state.list.map((i, index) => (
            <li key={index+1}>
              {i}
              <button 
                onClick={this.handleRemove}>
                  X
              </button>
            </li>
        ))}
      </ul>
      <p>Remaining: {this.state.list.length}</p>
      </div>
    );
  }
}

export default ToDoList;

Answer 1

我建议使用.bind的可选附加参数来更改传递给处理程序的内容。

在map方法中调用.bind(this. index)，将要删除的元素的索引传递给处理程序：

      <ul>
        {this.state.list.map((i, index) => (
            <li key={index+1}>{i}<button onClick={this.handleRemove.bind(this, index)}>X</button></li>
        ))}
      </ul>

然后更新处理程序以删除指定的元素：

  handleRemove(index) {
    const filteredArray = this.state.list.filter((_, i) => i !== index);
    this.setState({
      list: filteredArray
    });
  }

关于您的第二个问题，您应首先修改输入，以便通过将value={this.state.value}更改为value={this.state.items}来实际控制其值：

<input type="text" value={this.state.items} onChange={this.handleChange} />

然后在提交时简单地清除this.state.items：

  handleSubmit(event) {
    this.setState({
      list: [...this.state.list, this.state.items],
      items: ''
    })
    event.preventDefault();
  }

Answer 2

检查此行：

<li key={index+1}>{i}<button onClick={this.handleRemove}>X</button></li>

在handleRemove内，指令event.target指向按钮。按钮没有value属性。所以，你需要找到父母并获得它的内容：

// childNodes[0] is a TextNode, so, to get it's content use data pop
const toRemove = event.target.parentNode.childNodes[0].data.trim();
const filteredArray = this.state.list.filter(item => item !== toRemove);

另一个选项是将项目包装在元素中，例如span：

<li key={index+1}><span>{i}</span><button onClick={this.handleRemove}>X</button></li>

并在删除时获取它以获取项目值：

const toRemove = event.target.parentNode.children[0].textContent.trim();
const filteredArray = this.state.list.filter(item => item !== 
event.target.value)

在React中过滤数组

2 个答案: