onChangeとonBlurはredux-formフィールドでは動作しません

Question

onChangeとonBlurはredux-formフィールドでは動作しません。

import React, { PureComponent, PropTypes } from 'react' 
import { AppBar } from 'material-ui' 
import { Field, reduxForm } from 'redux-form' 
import './styles.scss' 

const required = value => value ? undefined : 'Required' 

const styles = { 
    button: { 
    margin: 12, 
    }, 
    exampleImageInput: { 
    cursor: 'pointer', 
    position: 'absolute', 
    top: 0, 
    bottom: 0, 
    right: 0, 
    left: 0, 
    width: '100%', 
    opacity: 0, 
    backgroundColor:'black!important' 
    }, 
}; 

class UsersComponent extends PureComponent { 
    static contextTypes = { 
    router: PropTypes.object 
    } 

    constructor(props) { 
    super(props) 
    this.handleSignout = this.handleSignout.bind(this) 
    this.submitForm = this.submitForm.bind(this) 
    }  
    onChange() { 
    console.log('yesss') 
    } 
    render() { 
    const { 
     handleSubmit, 
     pristine, 
     users, 
     isSubmitting 
    } = this.props  
    return (
     <div> 
     <Header onClick={this.handleSignout} /> 
     <Container> 
      <Col sm={12}> 
      <form action="submit" onSubmit={handleSubmit(this.submitForm)} > 
        <Field 
        type="text" 
        name="mobile" 
        hintText="Enter mobile number*" 
        component={reduxPhoneNumber} 
        validate={required} 
        disabled={isSubmitting} 
        fullWidth 
        autoFocus 
        onChange={this.onChange.bind(this)} 
        /> 
        <span style={{ color: 'red' }}>{existingUser}</span> 
        <div style={{ margin: '12px 0' }}> 
        </div> 
       </form> 
      </div> 
      </Col> 
      <Col sm={6}> 
      </Col>    
      </Row> 
     </Container> 
     <Footer/> 
     </div> 
    ) 
    } 
} 
export default reduxForm({ 
    form: 'users', 
    destroyOnUnmount: true, 
    validate 
})(UsersComponent); 

Answer 1

という問題を解決するにはどのようにあなたのcombineReducersにredux-form減速を追加します。

import { reducer as reduxFormReducer } from 'redux-form'; 

const rootReducer = combineReducers({ 
    form: reduxFormReducer, 
});