Question

我有一个react.js组件，我想从父组件向父组件传递一堆不同的方法，这些方法修改了父组件的状态。

class Page extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: this.props.items,
      currentItemID: 1
    };

    this.actions = this.actions.bind(this);
  }

  render() {
    return (
      <div className="page">
        {
          this.state.items.map(item =>
            <Item key={item._id} item={item} actions={this.actions} />
          )
        }
      </div>
    );
  }

  actions() {
    return {
      insertItem: function (itemID) {
        const currentItems = this.state.items;
        const itemPosition = this.state.items.map((item) => item._id).indexOf(itemID);

        const blankItem = {
          _id: (new Date().getTime()),
          content: ''
        };

        currentItems.splice(itemPosition + 1, 0, blankItem)

        this.setState({
          items: currentItems,
          lastAddedItemID: blankItem._id
        });
      },
      setCurrentItem: function (itemID) {
        this.setState({ currentItemID: itemID });
      },
      focus: function(itemID) {
        return (itemID === this.state.currentItemID);
      }
    }
  }

在我的子组件中，我试图在componentDidMount生命周期方法中使用focus方法，如下所示：

 componentDidMount() {
    if (this.props.actions().focus(this.props.item._id)) {
      this.nameInput.focus();
    }
  }

但是，我收到了错误

未捕获的TypeError：无法读取未定义的属性“currentItemID”

在焦点方法的定义中，在actions方法中。任何人都可以指出我正确的方向，为什么我得到错误或另一种方法将多个动作传递给子组件？

Answer 1

上下文没有传递给函数，那么函数中的'this'就是函数本身而不是组件..你可以这样解决（把函数放在组件中）：

      actions() {
         return {
            insertItem: this.insertItem.bind(this),
            setCurrentItem: this.setCurrentItem.bind(this),
            focus: this.focus.bind(this),
         }
      }
      insertItem(itemID) {
        const currentItems = this.state.items;
        const itemPosition = this.state.items.map((item) => item._id).indexOf(itemID);

        const blankItem = {
          _id: (new Date().getTime()),
          content: ''
        };

        currentItems.splice(itemPosition + 1, 0, blankItem)

        this.setState({
          items: currentItems,
          lastAddedItemID: blankItem._id
        });
      },
      setCurrentItem(itemID) {
        this.setState({ currentItemID: itemID });
      },
      focus(itemID) {
        return (itemID === this.state.currentItemID);
      }

但是，推荐的方法是将函数放在上面的组件中并删除actions方法并执行此操作：

<Item key={item._id} item={item} actions={{
            insertItem: this.insertItem.bind(this),
            setCurrentItem: this.setCurrentItem.bind(this),
            focus: this.focus.bind(this)
        }} />

或

<Item key={item._id} item={item} actions={{
            insertItem: () => this.insertItem(),
            setCurrentItem: () => this.setCurrentItem(),
            focus: () => this.focus()
        }} />

在单个支柱React.js中传递多个方法

1 个答案: