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

Update

arrow functions не не имеют своих собственных this - так что если вы используете .bind(this) внутри стрелки функция this относится к родительскому счету (в вашем примере это будет window или undefined, если вы используете 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