Question

我最近开始探索Material UI，我在TextField组件（来自Material UI的组件）中遇到了hintText的这种奇怪行为

这是我的代码：

/* in my component ... */
/* ... */
render() {
   const actions = [
                <FlatButton
                    key="1"
                    label="Cancel"
                    primary
                    onTouchTap={this.handleClose}
                />,
                <FlatButton
                    key="2"
                    label="Submit"
                    primary
                    type="submit"
                    onTouchTap={this.handleSubmit}
                />
               ];
    return (
           <div>
                    <IconButton                                                 
                       tooltip="Add Asset" 
                       onTouchTap={this.handleOpen}>
                        <Add color={"#000"} />
                    </IconButton>
                    <Dialog
                        title="Add"
                        actions={actions}
                        modal
                        open={this.state.open}>
                        <form>
                            <TextField hintText="Type" 
                                value={this.state.name} 
                                onChange={this.handleName}/>
                        </form>
                    </Dialog>
            </div>
        );
}

因此，当我开始在文本字段中输入内容时， hinttext 仍为，由于其他字母上的字母而导致文本无法读取。

如果有人可以帮助我，我会非常感激。：）

image

Answer 1

尝试使用placholder =＆＃34;输入＆＃34;而不是hintText =＆＃34;键入＆＃34;。

Answer 2

解决方案是，每次用户更新字段时，您都必须更新函数name中的变量handleName。所以完整的代码是：

<TextField hintText="Type" 
           value={this.state.name} 
           onChange={this.handleName}/>

和函数handleName：

handleName=(event)=>{
this.setState({name:event.target.value});
}

它应该工作。如果没有，请在下面的评论中告诉我们！

在开始键入字段时，“材质”UI中的TextField组件的HintText不会隐藏其值

2 个答案: