React - Redux：如何将其绑定到 es6 中的父容器？

Question

我有一个容器组件

import { AddQuest } from '../components/AddQuest.jsx'
import { connect } from 'react-redux'
import { addQuestActionCreator } from '../actions.js'

const mapStateToProp = (
  dispatch,
  ownProps
) => {
  return {
    onClick: () => {
      console.log(this);// <-- this represents the window object instead the AddQuest component
      dispatch(addQuestActionCreator(this.input.value)); //<-- throws : Uncaught TypeError: Cannot read property 'value' of undefined
      this.input.value = '';
    }
  }
}

export const AddQuestContainer = connect(
  undefined,
  mapStateToProp
)(AddQuest);

和一个演示组件

import React from 'react'
import { connect } from 'react-redux'
import { addQuestActionCreator } from '../actions.js'

export const AddQuest = ({onClick}) => {
  let input;

  return(

    <div>
      <input type="text" ref={
        node =>{
          input = node;
        }
      }/>
      <button onClick={onClick.bind(this)}>Add quest</button>
    </div>
  )
};

但是每次我点击我的按钮来添加一个任务。我有这个错误 Uncaught TypeError: Cannot read property 'value' of undefined.

我对bind(this)的理解有问题。我认为这会将展示组件的引用传递给容器组件。

为什么不是这样？

Answer 1

您可以通过参数传递值，并在AddQuest中重置输入

const mapStateToProp = (
  dispatch,
  ownProps
) => {
  return {
    onClick: (value) => {
      dispatch(addQuestActionCreator(value));
    }
  }
}

const AddQuest = ({ onClick }) => {
  let input;

  const send = () => {
    onClick(input.value)
    input.value = '';
  }

  return (
    <div>
      <input type="text" ref = { 
        (node) => { input = node }
      } />
      <button onClick={ send }>Add quest</button>
    </div>
  )
};

Example

更新

arrow functions don't not have their own this - so if you use .bind(this) inside arrow function this refers to parent score (in your example it will be window or undefined if you use strict mode), 你可以用 ES2015 类

重写你的例子

class AddQuest extends React.Component {
  render() {
    return <div>
      <input type="text" ref="text" />
      <button onClick={ this.props.onClick.bind(this) }>Add quest</button>
    </div>
  }
}

const mapStateToProp = (
  dispatch,
  ownProps
) => {
  return {
    onClick: function() {
      // this refers to AddQuest Object
      dispatch(addQuestActionCreator(this.refs.text.value));
      this.refs.text.value = '';
    }
  }
}

Example

React - Redux：如何将其绑定到 es6 中的父容器？

React - Redux: How to bind this to a parent container in es6?

javascript

reactjs

redux