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/

Answer 2

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

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 3

我猜这个问题出现在你的onChange处理程序中 - 你可能需要使用var handler = new WebRequestHandler(); handler.UseDefaultCredentials = true; var client = new TokenClient( Constants.TokenEndpoint, "client", "secret", handler); return client.RequestClientCredentialsAsync("read write").Result;而不是target.value：

target.name

Answer 4

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

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

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

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

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

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

4 个答案: