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

这是我刚输入的内容。不确定它是否可行，但它涵盖了从一个组件到anohter的操作，缩减器和更新值。当然，使用react redux这是一种疯狂的方法。我不确定在每次输入更改时调用此操作会有多高效。将状态的当前值作为支柱传递给所需组件可能会更好。

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

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

1 个答案: