Learner Learner - 1 month ago 15
React JSX Question

Could not type any text inside textfield

I am using redux-form-material-ui for my form. With below code, i cannot type anything on the textfield. I mean to say nothing gets type in the textfield. There are two textfield in my form and one Autocomplete. One is for device name and another for timeout value. Autocomplete works though. Why is it not showing the text i have typed?

What might be the reason for this issue? Have i done somewhere mistake?

Please see an image attached. I cant write anything in device name and timeout input box. Only autocomplete box can be selected and is shown on input box.

enter image description here

Here is my code

import React, { Component } from 'react';
import _ from 'lodash';

import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';

import {
AutoComplete as MUIAutoComplete, MenuItem,
FlatButton, RaisedButton,
} from 'material-ui';

import {
AutoComplete,
TextField
} from 'redux-form-material-ui';

const validate = values => {
const errors = {};
const requiredFields = ['deviceName', 'deviceIcon', 'deviceTimeout'];
requiredFields.forEach(field => {
if (!values[field]) {
errors[field] = 'Required';
}
});
return errors;
};

class DeviceName extends Component {

handleSubmit = (e) => {
e.preventDefault();
this.props.handleNext();
}

render() {
const {
handleSubmit,
fetchIcon,
stepIndex,
handlePrev,
pristine,
submitting
} = this.props;
return (
<div className="device-name-form">
<form>
<div>
<Field
name="deviceName"
component={TextField} {/* cannot type */}
floatingLabelStyle={{ color: '#1ab394' }}
hintText="Device Name"
onChange={(e) => this.setState({ deviceName: e.target.name })}
/>
</div>
<div>
<Field
name="deviceIcon"
component={AutoComplete} {/* works */}
hintText="icon"
openOnFocus
filter={MUIAutoComplete.fuzzyFilter}
className="autocomplete"
dataSource={listOfIcon}
onNewRequest={(e) => { this.setState({ deviceIcon: e.id }); }}
/>
</div>
<div>
<Field
name="deviceTimeout"
component={TextField} {/* cannot type */}
floatingLabelStyle={{ color: '#1ab394' }}
hintText="Device Timeout"
ref="deviceTimeout" withRef
onChange={(e) => this.setState({ deviceTimeout: e.target.name })}
/>
</div>
<div style={{ marginTop: 12 }}>
<RaisedButton
label={stepIndex === 4 ? 'Finish' : 'Next'}
primary
disabled={pristine || submitting}
className="our-btn"
onTouchTap={(e) => handleSubmit(e)}
/>
</div>
</form>
</div>
);
}
}

const mapStateToProps = ({ fetchIcon }) => ({
fetchIcon
});

const DeviceForm = reduxForm({
form: 'DeviceForm',
validate,
})(DeviceName);

export default connect(mapStateToProps)(DeviceForm);

Answer

I guess you can simplify your form as-

class DeviceName extends Component {

  handleSubmit = (values) => {
      console.log(values); // Do something with values
  }

  render() {
      const {
          ....
          handleSubmit //***Change 
      } = this.props;
    return (
        <div className="device-name-form">
            <form onSubmit={handleSubmit(this.handleSubmit)}>
                <div>
                    <Field   
                        name="deviceName"
                        component={TextField} {/* cannot type */}
                        floatingLabelStyle={{ color: '#1ab394' }}
                        hintText="Device Name"
                        //*** line removed
                    />
                </div>
                .....
                .....
                <div style={{ marginTop: 12 }}>
                  <RaisedButton
                    type="submit" // setting type
                    label={stepIndex === 4 ? 'Finish' : 'Next'}
                    primary
                    disabled={pristine || submitting}
                    className="our-btn"
                  />
                </div>
            </form>
        </div>
    );
  }
}
Comments