React - Redux：如何將它綁定到es6中的父容器？

我有一個容器組件React - Redux：如何將它綁定到es6中的父容器？

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）的理解有些問題。我認爲這會將展示組件的參考傳遞給容器組件。

爲什麼不是這樣？

來源

2016-02-12 dagatsoin

Redux的鼓勵此類使用的本地狀態的重寫你的榜樣。您可以將合成事件或提取的值傳遞給處理程序 - 很可能您的輸入沒有複雜的結構，它只是一個文本。在另一種情況下，您可以使用redux-form組件來處理這個問題。 –

您可以通過參數傳遞價值，並在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不會沒有自己的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

來源

2016-02-12 11:12:14

React - Redux：如何將它綁定到es6中的父容器？

回答

相關問題