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的{{1}}道具：

签名：function（event：object，newValue：string）=＆gt;无效

事件：更改定位文本字段的事件。

newValue：文本字段的新值。

所以我认为您应该删除<TextField>方法，然后像这样更改setUrl（无需使用<TextField>）：

onBlur

关于代码的更多评论：

我可能错了，但调用传递道具的父组件的<TextField id="serverUrl" floatingLabelText={__("Server URL")} value={owner.state.serverUrl} onChange={(evt, value) => this.owner.setState({ serverUrl: value })} />方法对我来说似乎是一种不好的做法，你应该考虑在setState组件的状态下处理输入的状态

另外，你使用Config而不是类组件，在你的情况下使用它似乎没用（你使用es6 import而create-react-class用于构建没有es6的react应用程序）see official docs for more infos.

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

Config.js ：

create-react-class

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

Answer 2

我猜问题是Textfield价值道具和onBlur。您传递给值prop的状态值不正确，即value = {owner.state.serverUrl}它应该是value = {this.owner.state.serverUrl}。

onBlur功能并不存在于您的代码中，但您尝试调用onBlur = {this.onBlur}，它应该从TextField组件中删除。根据材料UI docs

，似乎onBlur不是TextField的有效道具

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

受控TextField在键盘上的每个字符后失去焦点

2 个答案: