ReactJS：如何将 <input/> 放在 Material UI 的 <TextField/> 中？答案

【问题标题】：ReactJS: How to put <input/> inside a Material UI's <TextField/>?ReactJS：如何将 <input/> 放在 Material UI 的 <TextField/> 中？
【发布时间】：2016-08-15 00:07:28
【问题描述】：

我正在尝试将<TextField/> (http://www.material-ui.com/#/components/text-field) 设为<input/>。所以我尝试了以下方法：

<TextField
  hintText='Enter username'
>
    <input
      className="form-control"
      ref='username'
      type='text'
    />
</TextField>

但它没有正确拾取参考。记录this.refs.username.value.trim() 时，会显示value 未定义的错误。但是当<input/>单独使用时，它会正确拾取输入的文本。

使用<input/> 但使用<TextField/> 作为样式包装器的正确方法是什么？

提前谢谢你！

【问题讨论】：

你需要这个做什么？ <TextField /> 已经封装了 ''。您的代码看起来像是在尝试向TextField 添加一个input，为什么？

标签： javascript html css reactjs material-ui

【解决方案1】：

我认为您不能在 TextField 组件中包含输入字段

【讨论】：

那么有没有办法让 TextField 组件具有<Input/> 所具有的那些属性（ref、type、className）？
我没有测试过，但是是什么阻止你直接做跨度>
试过了，但它在应该获取[object HTMLInputElement]时获取[object Object]
TextField 是自定义 Object 不是 HTMLInputElement，结果是正确的
但我希望它返回 HTMLInputElement，因为这就是它在<input/> 中所做的事情。在<TextField/>可以做到吗？

【解决方案2】：

Material UI 的 TextField 是一个输入，所以您需要做的就是在其下方添加另一个 TextField，如果您希望它们更接近，请添加样式

你不能在普通 HTML 中使用<input><input></input></input>。

<TextField hintText="Hint" name="Name" fullWidth={true} onChange={this.handleChange} />

您只需要一个句柄更改功能，如果需要，您应该可以通过谷歌搜索来解决。

【讨论】：