2016-08-15 5 views
1

Я пытаюсь сделать <TextField/> (http://www.material-ui.com/#/components/text-field) как <input/>. Поэтому я попытался выполнить следующие действия:ReactJS: Как положить <input/> внутри материала UI's <TextField/>?

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

Но он не подбирает правильный номер. Когда регистрируется this.refs.username.value.trim(), отображается сообщение об ошибке, которое value не определено. Но когда <input/> используется один, он правильно подбирает введенный текст.

Что такое способ использования <input/>, но с <TextField/> в качестве обертки для стилизации?

Спасибо заранее!

+0

Для чего это необходимо? '' уже инкапсулирует ''. Ваш код выглядит как попытка добавить еще один 'input' в' TextField' почему? –

ответ

0

Я не думаю, что вы можете иметь поле ввода внутри компонента TextField

+0

, тогда есть способ сделать компонент TextField иметь эти атрибуты (ref, type, className) у '' есть? –

+0

Я не тестировал его, а то, что мешает вам непосредственно делать David

+0

попробовал, но он выбирает' [ object Object] ', когда предполагается, что он будет [' object HTMLInputElement] ' –

0

TextField Material UI ЯВЛЯЕТСЯ Input Так все, что нужно сделать, это добавить еще один TextField Ниже добавить стиль, если вы хотите, чтобы они ближе

Вы не смогли сделать <input><input></input></input> в нормальном HTML.

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

Вам просто нужна функция изменения рукоятки, которую вы должны иметь возможность работать с поисковой системой, если вам это нужно.