無法在文本框內鍵入任何文本

我正在爲我的表單使用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);

來源

2016-10-19 Serenity

請澄清不工作的文本字段，並提供一個更小的問題。它會幫助人們分析你的代碼。問候 –

你可以在React中使用'setState（）'而不必首先初始化狀態嗎？ –

是的，它可以。我在添加其他數據及其工作時使用了這種方式。如果我們不想在表單中顯示初始狀態，我們也可以這樣做。 – Serenity

我想你可以簡化您的形式原樣

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

來源

2016-10-19 19:10:13

這工作。正在刪除onChange事件。我發現我們不能在Autocomplete中選擇兩次，所以我選擇了redux-form而不是redux-form-material-ui。感謝您的支持。 – Serenity

我猜想，這個問題是在你的onChange處理程序 - 你可能需要使用target.value而非target.name：

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

來源

2016-10-19 07:51:29

我的問題是我無法在輸入字段中輸入任何文本。 – Serenity

對不起，仍然無法正常工作。我無法在輸入字段中輸入任何內容。 – Serenity

我已更新我的問題。你可以在那裏看到輸入框沒有文字，因爲我不能在那裏寫任何東西。只有自動完成輸入框正在工作。 – Serenity

通過將onChange添加到您的Field s，是不是阻止了redux形式接受來自該輸入字段的新值？您是否有嘗試將這些添加到組件狀態的原因？

文檔中的例子當然建議你不應該需要做的 - http://redux-form.com/6.1.1/examples/material-ui/

來源

2016-10-19 15:49:42

我有同樣的問題，原來我用錯誤的導入。我用的是正常導入：

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

因爲我的店是不變的（使用Immutable.js）我只好用一成不變的導入：

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

某種錯誤日誌的終極版形式會在這種情況下很方便。

來源

2016-12-02 14:53:31 Dani

無法在文本框內鍵入任何文本

回答

相關問題