受控文本字段在键盘输入每个字符后失去焦点

Question

每当我在字段中输入一个字符时，焦点就会消失。我该如何纠正这个问题？

"use strict"

import React from "react";
import createReactClass from "create-react-class";

import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';

import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';

export var Config = createReactClass({
    setConfig: function() {
        localStorage.serverUrl=this.owner.state.serverUrl;
        location.reload();
       },

    setUrl: function(evt) {
        this.owner.setState({serverUrl: evt.target.value});
        },


    render: function() {
        var {owner}=this.props;
        this.owner=owner;

        return <div>
              <CardTitle title={__("Server")} />
              <CardText>
                  <TextField id="serverUrl" floatingLabelText={__("Server URL")} value={owner.state.serverUrl} onChange={this.setUrl} />
             </CardText>
            <CardActions>
                <RaisedButton label={__("Apply")} onTouchTap={this.setConfig} />
            </CardActions>
        </div>;
    }
});

当然应用程序的根上还有其他元素（实际逻辑有点复杂，这里只介绍结构）：

        <MuiThemeProvider muiTheme={muiTheme}>
            <div>
            <AppBar title={__("Demo")}
                iconElementRight={right}
                onRightIconButtonClick={this.logon}
                onLeftIconButtonClick={this.toggleMenu} />
            <Drawer open={this.state.menuOpen}
                docked={false}
                onLeftIconButtonTouchTap={this.toggleMenu}
                onTouchTap={this.toggleMenu}>
                <RaisedButton onTouchTap={this.toggleMenu} label={__("Menu")} />
                <Menu>
                    <MenuEntry owner={this} value="/config" title={__("Server")} />
                    <MenuEntry owner={this} value="/logon" title={__("Logon")} />
                    <Divider />
                    <MenuEntry owner={this} value="/about" title={__("About")} />
                </Menu>
            </Drawer>
            <Paper>
            <Config owner={this} />
            </Paper>
        </div>
      </MuiThemeProvider>;

这里实现MenuEntry

"use strict";

import React from "react";
import createReactClass from "create-react-class";

import MenuItem from 'material-ui/MenuItem';

export var MenuEntry=createReactClass({

    onChange: function() {
        this.owner.setState({menuOpen: false, systemMenuOpen: false, location: this.value});
        },

    render: function() {
        var {title, owner, value, color}=this.props;
        this.owner=owner;
    this.value=value;

    var selected=(owner.state.location==value);

    return <MenuItem checked={selected} onTouchTap={this.onChange} backgroundcolor={color}>
        {title}
        </MenuItem>;
    }
});

版本：

Material-UI: 0.20
React:       16.2.0  
Browser:     Chrome  63.0.3239.123  (Mac & Windows & Android)
             FF 57.0.4  (Mac & Windows)

Answer 1

正如Material-ui 文档中提到的关于onChange的属性<TextField>：

签名：函数（事件：对象，newValue：字符串）=> void

事件：针对文本字段的更改事件。

newValue：文本字段的新值。

所以我认为你应该删除setUrl方法并<TextField>像这样进行更改（无需使用onBlur）：

<TextField id="serverUrl" floatingLabelText={__("Server URL")} value={owner.state.serverUrl} onChange={(evt, value) => this.owner.setState({ serverUrl: value })} />

关于代码的更多评论：

我可能是错的，但调用setState在 props 中传递的父组件的方法对我来说似乎是一种不好的做法，您应该考虑在组件状态中处理输入的状态Config。

另外，您使用的create-react-class是而不是类组件，在您的情况下使用它似乎毫无用处（您使用的是 es6 import，而 create-react-class 用于构建没有 es6 的 React 应用程序）请参阅官方文档以获取更多信息。

编辑：我能够重现一个最小的工作示例：

配置.js：

import React from 'react';
import createReactClass from 'create-react-class';

import TextField from 'material-ui/TextField';

export var Config = createReactClass({
  setUrl: function(evt, value) {
    this.owner.setState({ serverUrl: value });
  },

  render: function() {
    var { owner } = this.props;
    this.owner = owner;

    return (
      <div>
        <TextField
          id="serverUrl"
          floatingLabelText={'Server URL'}
          value={owner.state.serverUrl}
          onChange={this.setUrl}
        />
      </div>
    );
  },
});

索引.js：

import React, { Component } from 'react';
import createReactClass from 'create-react-class';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { render } from 'react-dom';

import { Config } from './Config';

var App = createReactClass({
  getInitialState: function() {
    return { serverUrl: 'test' };
  },
  render: function() {
    console.log(this.state.serverUrl);
    return (
      <MuiThemeProvider>
        <Config owner={this} />
      </MuiThemeProvider>
    );
  },
});

render(<App />, document.querySelector('#root'));