React-Redux-Form 将数据保存到 onChange 的 prop

Question

我是新的 react-redux，我正在尝试通过使用可以传递给另一个组件的 onChange 事件来保存从 react-redux-form 文本框输入的值以支持 prop

我的文本框代码片段是

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

这是我刚打出来的东西。不确定它是否有效，但它涵盖了动作、缩减器和从一个组件到另一个组件的更新值。当然，这是使用 React Redux 来实现的疯狂方式。我不确定在每次输入更改时调用此操作的效率如何。您最好将 state 的当前值作为 prop 传递给您想要的组件。

如果您还有其他问题，我很乐意为您提供帮助或为您指出其他资源。

React-Redux-Form 将数据保存到 onChange 的 prop

React-Redux-Form save data to prop from onChange

reactjs

react-redux

react-redux-form