reactjs - 受控的 TextField 在键盘输入每个字符后失去焦点

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 docs 中所述关于onChange <TextField> 的 Prop :

Signature: function(event: object, newValue: string) => void

event: Change event targeting the text field.

newValue: The new value of the text field.

所以我认为你应该删除 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 导入，而 create-react-class 用于构建没有 es6 的 react 应用程序) see official docs for more infos.

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

配置.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>
    );
  },
});

index.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'));