阵营 - 终极版表格保存数据来自的onChange

Question

来支撑我的新反应，终极版，我试图用它可以传递给onChange事件保存到道具，从一个反应 - 终极版形式的文本框中输入的值为文本框的另一个组件

我的代码段是

<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。当然，这是一种使用反应减少的疯狂方式。我不确定在每次输入更改时调用此操作的效率如何。将状态的当前值作为道具传递给所需的组件可能会更好。

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