Question

我正在尝试从我的待办事项列表中删除一个项目。到目前为止，这是我的代码。我认为我在父代码上做错了。我需要协助。错误显示“未处理的拒绝（TypeError）：无法读取未定义的属性'props”

import React from "react";

const List = props => (
  <ul>
    {props.items.map((item, index) => (
      <li key={index}>
        <input
          onClick={this.props.removeTodo.bind(null, item)}
          type="checkbox"
        />
        {item}
      </li>
    ))}
    <style jsx>{`
      ul {
        list-style-type: none;
      }
    `}</style>
  </ul>
);
export default List;

import React, { Component } from "react";
import List from "./List";

export default class App extends Component {
  state = {
    term: "",
    items: []
  };

  onChange = event => {
    this.setState({ term: event.target.value });
  };

  onSubmit = event => {
    event.preventDefault();
    this.setState({
      term: "",
      items: [...this.state.items, this.state.term]
    });
  };

  removeTodo(name) {
    const filteredItems = this.state.items.filter(item => item !== name);
    this.setState({
      items: [...filteredItems]
    });
  }

  render() {
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          <input value={this.state.term} onChange={this.onChange} />
          <button>Submit</button>
        </form>
        <List
          items={this.state.items}
          removeTodo={this.removeTodo.bind(this)}
        />
      </div>
    );
  }
}

Answer 1

List是一个功能组件，所以您只需编写props.removeTodo而不是this.props.removeTodo，因为props是传递给该组件的第一个参数。

const List = props => (
  <ul>
    {props.items.map((item, index) => (
      <li key={index}>
        <input
          onClick={props.removeTodo.bind(null, item)}
          type="checkbox"
        />
        {item}
      </li>
    ))}
    <style jsx>{`
      ul {
        list-style-type: none;
      }
    `}</style>
  </ul>
);

我想使用带有react的复选框从列表中删除一个项目

1 个答案: