javascript - 无法在文本字段中输入任何文本

Question

我正在使用 redux-form-material-ui 作为我的表单。使用下面的代码，我无法在文本字段上输入任何内容。我的意思是说文本字段中没有输入任何内容。我的表单中有两个文本字段和一个自动完成字段。一个用于设备名称，另一个用于超时值。自动完成功能虽然有效。为什么它不显示我输入的文本？

此问题的原因可能是什么？我是不是做错了什么？

请参阅所附图片。我无法在设备名称和超时输入框中写入任何内容。只能选择自动完成框并显示在输入框中。

这是我的代码

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 1

通过将 onChange 添加到您的 Field 中，您是否会阻止 redux 表单接受来自该输入字段的新值？您尝试将这些添加到组件状态中是否有原因？

文档中的示例当然表明您不需要这样做 - http://redux-form.com/6.1.1/examples/material-ui/