reactjs - 当开始在字段中输入内容时，Material UI 中的 TextField 组件的 HintText 不会隐藏其值

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>
        );
}

因此，当我开始在文本字段中输入内容时，提示文本 仍然存在，导致由于字母覆盖另一个字母而导致文本不可读。

如果有人能帮助我，我将非常感激。 :)

image

Answer 1

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

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

和函数handleName:

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

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