Невозможно ввести текст внутри текстового поля

Question

Я использую для моей формы редукцию-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

Я думаю, вы можете упростить форму как-

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 2

Я бы предположил, что проблема в ваших обработчиков OnChange - Вы, вероятно, нужно использовать target.value вместо target.name:

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

Answer 3

Добавив onChange к вашему Field s, разве вы не препятствуете форме редукции принимать новые значения из этого поля ввода? Есть ли причина, по которой вы пытаетесь добавить их в состояние Component?

примеры в документации, конечно, предложить вам не нужно делать это - http://redux-form.com/6.1.1/examples/material-ui/

Answer 4

Я была такая же проблема, оказалось, я использовал неправильный импорт. Я использовал обычный импорт:

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

Поскольку мой магазин неизменен (используя Immutable.js) я должен был использовать непреложный импорт:

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

Некоторые виды регистрации ошибок для Redux-формы будет были удобны в этом случае.