React-Redux-form onChange에서 소품 데이터 저장

Question

새로운 react-redux이고 전달할 수있는 onChange 이벤트를 사용하여 react-redux-form 텍스트 상자에서 입력 한 값을 소품에 저장하려고합니다. 나는이 값을 저장하고 다른 구성 요소이 제공 할 수있는 방법 텍스트 상자의 또 다른 구성 요소

내 코드는

<ListItemContent> 
     <Control component={Textfield} model="somemodel" label="MyLabel" 
     onChange={this.props}/> 
</ListItemContent> 

입니까?

편집 나는 그것이 부분적으로 일하고 있습니다

 <ListItemContent> 
      <Control component={Textfield} model="somemodel" label="MyLabel" 
      onBlur={this.onChangeOfValue}/> 
    </ListItemContent> 

     onChangeOfValue = (event) => 
     { 
      this.setState({ newValueToPassAlong: event.target.value}); //newValueToPassAlong is set in constructor 
    }; 



    ..... 

    let mapStateToProps = (state) => { 
    return {newValueToGive: state.newValueToPassAlong} //This is undefined 
    }; 

    export default connect(mapStateToProps)(form) 

은 또한, 내 componentWillReceiveProps (nextProps)이 때 다른 구성 요소의 상태 변경을 해고되지 않습니다.

Answer 1

// YOUR TEXTFIELD COMPONENT 
import React, { Component } form 'react'; 
import { reduxForm, Field } from 'redux-form'; 
import {passValueToOtherComponent} from '../actions/your-actions-index-file'; 
import { connect } from 'react-redux'; 
import ListItemContent form 'list-item-content'; 

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

    this.state = { 
     textFieldValue: '', 
    } 
    this.onInputChange = this.onInputChange.bind(this); 
    } 

    onInputChange(event) { 
    var newValue = event.target.value; 
    this.setState({textFieldValue: newValue}); 
    //when input changes 
    //call action to update global state... 
    this.props.passValueToOtherComponent(this.state.textFieldValue) 
    } 

    render() { 
    <form> 
    <ListItemContent> 
     <Control component={Textfield} model="somemodel" label="MyLabel" 
      onChange={this.onInputChange} value={this.state.textFieldValue}/> 
    </ListItemContent> 
    </form> 
    } 
} 

//ReduxForm wrapper 
const wrappedReduxForm = connect(null, {passValueToOtherComponent})(TextField) 

export default reduxForm({ 
    form: 'TextField' 
})(TextField) 


// actions/your-actions-index-file.js 
//create an action which will call to update global state 
export const NEW_VALUE = "NEW_VALUE" 

export function passValueToOtherComponent(value) { 
    return { 
    type: CREATE_POST, 
    payload: value, 
    } 
} 


//YOUR NewValue Reducer 
//reducer_new_value.js 
//create reducer which will accept payload data 
import {NEW_VALUE} from '../actions/your-actions-index-file'; 

const INITIAL_STATE = { 
    valueToPass: null 
}; 

export default function (state = [], action) { 
    console.log('Action...' action); 

    switch (action.type) { 
    case NEW_VALUE: 
     return { ...state, valueToPass: action.payload.data} 
     break; 
    default: 

    } 
} 

//Your Root Reducer 
//Because you may have lots of state to manage, a rootReducer is awesome in managing it all 
import { combineReducers } from 'redux'; 
import NewValueReducer from './reducer_new_value'; 

const rootReducer = combineReducers({ 
    // state: (state = {}) => state 
    value: NewValueReducer, 
}); 

export default rootReducer; 



//finally pass this desired value to your desired Component 
import React, {Component} from 'react'; 
import { connect } from 'react-redux'; 

class OtherComponent extends Component { 

    render() { 
    return (
     <div> 
     <input value= {this.props.texFieldValue}> 
     </div> 
    ) 
    } 
} 


function mapStateToProps(state) { 
    return { textFieldValue: state.value.valueToPass } 
} 

export default connect(mapStateToProps)(OtherComponent); 

이것은 방금 입력 한 것입니다. 작동 여부는 확실치 않지만 조치, 감속기 및 하나의 구성 요소에서 값을 업데이트하는 것을 포함합니다. 물론, 이것은 reactx를 사용하여 그것을하는 미친 방법입니다. 모든 입력 변경시이 액션을 호출하는 것이 얼마나 효율적인지 확신 할 수 없습니다. 현재 상태 값을 원하는 구성 요소로 전달하는 것이 더 나을 것입니다.

더 궁금한 점이 있으면 기꺼이 도와 주거나 다른 리소스를 알려 드리겠습니다.