Reactjs/Redux에 입력 상자를 연결하는 방법은 무엇입니까?

Question

나는 redux 디자인 당이 권리를하고 있는지 확실하지 100 %.

import React from 'react'; 
import {connect} from 'react-redux'; 
import {bindActionCreators} from 'redux'; 
import 'materialize-css/sass/materialize.scss'; 
import NavigationContainer from './NavigationContainer'; 

import AddStorageModal from './AddStorageModal.js' 
import {loadAddStorageModal, createNewStorage} from '../actions/StorageActions.js' 
import '../styles/main.scss'; 


class App extends React.Component { 
    render() { 
    return (
     <div> 
     <NavigationContainer /> 
     <AddStorageModal {...this.props} /> 
     </div> 
    ) 
    } 
} 

function mapStateToProps(state) { 
    return { 
     storages: state.storages 
    }; 
} 

function matchDispatchToProps(dispatch){ 
    return bindActionCreators({loadAddStorageModal: loadAddStorageModal, createNewStorage: createNewStorage}, dispatch); 
} 


export default connect(mapStateToProps, matchDispatchToProps)(App); 

StorageActions

export function fetchStorage() { 
    return function(dispatch) { 
     var payload = [ 
     { 
      id: 1, 
      name: "Fridge2" 
     }, 
     { 
      id: 2, 
      name: "Closet2" 
     }, 
     { 
      id: 3, 
      name: "Car2" 
     } 
    ]; 
    dispatch({type: "Fetch_Storage", payload: payload}); 
    } 
} 

export function loadAddStorageModal(load) { 
    return function(dispatch) { 
     dispatch({type: "Load_Add_Storage_Modal", payload: load}); 
    } 
} 

export function createNewStorage(storage) { 
    return function(dispatch) { 
     dispatch({type: "New_Storage_Created", payload: storage}); 
    } 
} 

감속기

export default function reducer(state = { 
    fetchedStorages: [], 
    openAddStorageModal: false 
}, action) { 
    switch (action.type) { 
     case "Fetch_Storage": { 
      return { 
       fetchedStorages: action.payload 
      } 
     } 
     case "Load_Add_Storage_Modal": { 
      return { 
       openAddStorageModal: action.payload, 
       fetchedStorages: state.fetchedStorages 
      } 
     } 
     case "New_Storage_Created": { 
      return { 
       openAddStorageModal: false, 
      } 
     } 
    } 


    return state; 
} 

AddStorageModal는

import React from 'react'; 

import 'materialize-css/sass/materialize.scss'; 
import 'materialize-css/js/materialize.js'; 
import 'font-awesome/scss/font-awesome.scss'; 
import '../styles/main.scss'; 

export default class AddStorageModal extends React.Component { 
    constructor() { 
     super(); 
     this.state = {storageName: ""} 
    } 
    handleChange(event) { 
     this.setState({storageName: event.target.value}); 
    } 
    render() { 
     if (this.props.storages.openAddStorageModal) { 
      $('#add-new-storage-modal').openModal({ dismissible: false }); 
     } 
     return (
      <div id="add-new-storage-modal" className="modal" > 
       <div className="modal-content"> 
        <h6>Enter your new Storage (Freezer, Pantry, etc.) </h6> 
        <div className="row"> 
         <form> 
          <div className="input-field col s12 m12 l12 "> 
           <input id="storage_name" type="text" className="validate" value={this.state.storageName} onChange={this.handleChange} /> 
           <label htmlFor="storage_name">Storage Name</label> 
          </div> 
          <br /> 
          <h4 className="center">OR</h4> 
          <h6>Enter in the sharing key you were given.</h6> 
          <div className="input-field col s12 m12 l12 "> 
           <input id="sharing_key" type="text" className="validate" /> 
           <label htmlFor="sharing_key">Sharking Key</label> 
          </div> 
         </form> 
        </div> 
       </div> 
       <div className="modal-footer"> 
        <a href="#!" className="waves-effect waves-green btn-flat left">Add</a> 
        <a href="#!" className="modal-action modal-close waves-effect waves-green btn-flat" onClick={() => this.props.loadAddStorageModal(false) }>Cancel</a> 
       </div> 
      </div> 
     ) 
    } 
} 

나는

를 얻을 수 0

Uncaught TypeError: Cannot read property 'setState' of undefined 

이것이 단지 내가 redux를 잘못하고 있다는 것을 의미하는지 아니면 방금 몇 가지 일반적인 오류가 발생했는지 확실하지 않습니다.

Answer 1

, 당신은 this에 대한 참조를 유지해야합니다. @nuway는 그의 대답에 말했듯이, 함수에

1. 바인드 this : 당신은 두 가지 옵션이 있습니다.

2. 또한 this 참조 유지 화살표 기능, 사용 onChange={ (event) => this.handleChange(event) }

Answer 2

당신은 연료 소모량이되지 않습니다, 그렇지 않으면 this handleChange 내부의 구성 요소가 아니라 입력 요소 자체를 반응의 handleChange 핸들러 this에 결합해야합니다. 당신은 일반적인 함수 참조를 전달할 수 없습니다

onChange={this.handleChange.bind(this)}