材料UI文本字段在材料ui对话框中未聚焦

Question

问题 -

创建材质ui对话框，当点击反应网格布局项按钮时弹出窗口。对话框内容选择字段和文本字段。选择的改变是有效的，但是当它改变文本字段时它甚至没有聚焦它。当我点击进入文本框时，网格项也会显示可拖动的行为。按住键盘键后，文本字段onchnage事件被触发

 import React from 'react';
 import {withStyles} from 'material-ui/styles'
 import PropTypes from 'prop-types';
 import Dialog, { 
    DialogActions,
    DialogContent,
    DialogContentText,
    DialogTitle,
   } from 'material-ui/Dialog';
 import Button from 'material-ui/Button';
 import TextField from 'material-ui/TextField';
 import KPISelect from './KPISelect'
 import {MenuItem} from 'material-ui/Menu';
 import {FormControl, FormHelperText} from 'material-ui/Form';
 import Select from 'material-ui/Select';
 import Input, {InputLabel} from 'material-ui/Input';

 // Inline styles for your component
 const classes = ({
 textField: {
   margin: "10px"
 },
 formControl: {
   margin: "20px"
 }
})

 // Default React Component Constructor
 class EditDialog extends React.Component {

 constructor(props) {
  super(props)
   this.state = {
     open: this.props.open,
     editableFields: this.props.editableFields,
     editValues: {}
   }
   this.buildEditableForms = this.buildEditableForms.bind(this);
 }

 componentWillReceiveProps(nxtProps) {
     let editItems= {};
     nxtProps.editableFields.forEach((item)=>{
     editItems[item.name] = item.value
     })
   this.setState({
        open: nxtProps.open,
        editableFields: nxtProps.editableFields,
        editValues: editItems
      })
   }

   handleClose = () => {
     this.props.handleClose()
   }

   buildEditableForms() {
    console.log("in editable form")
    const panels = [];
    const classes = this.props.classes;
for (let panel of this.props.editableFields) {
  let newPanel;
  if (panel.type === "text") {
    newPanel = <TextField id={panel.name} label={panel.label} className={classes.textField}
                          onChange={(event)=>this.onTextInputChanged(panel.name, event)} value={this.state.editValues[panel.name]}/>
  }
  else if(panel.type= "select"){
    const options = panel.options;
    let menuItems = options.map(i => {
      return (
        <MenuItem value={i} data-value={i}>{i}</MenuItem>
      )
    })
    newPanel =
      <FormControl className={classes.formControl}>
        <InputLabel htmlFor={panel.name}>{panel.label}</InputLabel>
        <Select
          value={this.state.editValues[panel.name]}
          onChange={this.onInputChanged}
          input={<Input name={panel.name}/>}
        >
          {menuItems}
        </Select>
        <FormHelperText>Select {panel.label} </FormHelperText>
      </FormControl>
  }
  panels.push(newPanel);
}
return panels;

  onTextInputChanged = (name, event) =>{
    console.log("changed inputs")
    let editValues = this.state.editValues
    editValues[name] = event.target.value
    this.setState({
    editValues: editValues
    })
  }

 onInputChanged = (event) => {
    let editValues = this.state.editValues
    editValues[event.target.name] = event.target.value
    this.setState({
     editValues: editValues
 })
}

 render() {
 const classes = this.props.classes;
 return (
  <Dialog open={this.state.open}
          onClose={this.handleClose}
          aria-labelledby="alert-dialog-title"
          aria-describedby="alert-dialog-description">

    <DialogTitle id="alert-dialog-title">Edit Component</DialogTitle>

    <DialogContent>
      {this.buildEditableForms()}
    </DialogContent>

    {this.props.showKPIs &&
    <KPISelect onChange={this.onKPIChange}/>
    }

    <DialogActions>

      <Button onClick={this.handleClose} color="primary">
        Cancel
      </Button>

      <Button onClick={() => this.props.onSave(this.state.editValues)} color="primary">
        Save
      </Button>

    </DialogActions>

  </Dialog>
   );
    }
  }

 // Props Validation
  EditDialog.propTypes = {
  classes: PropTypes.object
 }

// Exports the component so it is visible to other components as an import
export default withStyles(classes)(EditDialog)