无法在文本字段中键入任何文本

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 处理程序中 - 您可能需要使用 target.value 而不是 target.name:

onChange={(e) => this.setState({ deviceTimeout: e.target.value})

Answer 2

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

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

Answer 3

我猜你可以将你的表格简化为-

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

Answer 4

我遇到了同样的问题，原来我使用了错误的导入。我使用的是正常导入：

import { Field, reduxForm } from 'redux-form'

因为我的商店是不可变的（使用 Immutable.js）我不得不使用不可变导入：

import { Field, reduxForm } from 'redux-form/immutable'

redux-form 的某种错误日志记录在这种情况下会很方便。

无法在文本字段中键入任何文本

Could not type any text inside textfield

javascript

reactjs

redux

material-ui

redux-form