2016-08-15 5 views
1

<TextField/> (http://www.material-ui.com/#/components/text-field)을 <input/>으로 만들려고합니다. 그래서 나는 다음을 시도했다 :ReactJS : 안에 <input/>을 넣는 방법?

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

그러나 ref를 올바르게 집어 올리지 못한다. this.refs.username.value.trim()이 로깅되면 value이 정의되지 않은 오류를 표시합니다. 그러나 <input/>을 단독으로 사용하면 입력 된 텍스트가 올바르게 선택됩니다.

<input/>을 사용하는 적절한 방법은 무엇입니까? <TextField/>을 스타일 용 래퍼로 사용 하시겠습니까?

미리 감사드립니다.

+0

무엇이 필요합니까? ''는 이미 ''을 캡슐화합니다. 귀하의 코드는'TextField'에'input'을 한 번 더 추가하려는 시도처럼 보입니다. –

답변

0

난 당신이 재료 UI의 텍스트 필드는 입력이

+0

그런 다음 TextField 구성 요소에 해당 속성 (ref, type, className)을 만들 수있는 방법이 있습니까? 에는? –

+0

테스트를 해보지 않았지만 직접적으로 David

+0

시도해 보았습니다. object object]'[object HTMLInputElement]'를 가져와야 할 때 –

0

에서는 TextField 구성 요소의 내부 입력 필드를 가질 수 있다고 생각하지 않는 것은 그래서 당신이해야 할 모든 당신이

그들을 가까이하려는 경우가 스타일을 추가 아래 다른 텍스트 필드를 추가 할 것입니다

정상적인 HTML에서는 <input><input></input></input>을 수행 할 수 없습니다.

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

필요한 경우 Google에서 해결할 수있는 핸들 변경 기능 만 있으면됩니다.