React-Redux-Form save data to prop from onChange

Question

I am new react-redux and I am trying to save to props the value entered in from a react-redux-form textbox by using the onChange event which can be passed to another component

My code snippet for the textbox is

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

How can I save this value and make this available to other components?

EDIT I have it partly working:

     <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)

Further, my componentWillReceiveProps(nextProps) is not being fired when the other component's state changes.

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);

This is something I just typed out. Not sure if it will work, but it covers actions, reducers, and updating values from one component to anohter. Of course, this is a crazy way to do it using react redux. I'm not sure how efficient it would be to call this action on every input change. You might be better off passing the current value of state as a prop to your desired component.

If you have some more questions, I'd be happy to help or point you to some other resources.