Material-UI의 <TextField/>을 RE = 1로 올바르게 반환하려면 ReactJS에서 <input/>을 좋아하세요? 다음과 같은 방법으로

Question

:

<input 
    className='form-control' 
    placeholder='Input Text' 
    ref='inputText' 
    type='text' 
    /> 

    <button 
    onClick={(event) => this.handleClick(event)} 
    > 

그리고 나는 시도 :

handleClick(event) { 
    const inputText = this.refs.inputText 
    console.log(inputText.value.trim()) 
    } 

나는 재료-UI의 <TextField/>는 <input/> 같은 심판이 제대로 입력 된 텍스트를 반환하려고 노력하고는 <button/>으로 트리거 할 수 있습니다 다음은 <TextField/>이지만, undefined으로 반환됩니다. 위의 <input/>처럼 정확하게 입력 된 텍스트를 반환하려면 어떻게해야합니까?

<TextField 
    hint='Enter text' 
    className='form-control' 
    ref='inputText' 
    type='text' 
    /> 

Answer 1

당신은 사용해야 onchange를 = {} 값을 얻을 수 있습니다 :

가 휘는되는 value 및 onChange 기능을 사용하여 텍스트 필드를 설정 :이 접근 방식을 제안

_onChange = (e) => { 
    console.log(e.target.value); 
} 

<TextField 
    onChange={this._onChange} 
/> 

Answer 2

을 redux 자체로 들어가면 onChange 함수는 value을 업데이트합니다. textFieldChange는 단순히 textFieldValue 업데이트 작업이

<TextField 
     value={this.props.textFieldValue} 
     onChange={this.props.textFieldChange} 

:

그래서 당신은 이런 일이있을 것이다. 대부분의 양식 redux에서 이런 식으로 작동합니다. 그 소도구들과 행동을 위해 만든 이름들은 단지 예일뿐입니다. 나는 국가의 건축가의 일부를 형성 할 수 있기 때문에이 REDUX와 함께이 일을 좋아

state: { 
    form: { 
     textField: ...your textfield value here, 
     name: ..., 
     whateverElse: ... 
    } 
}; 

을 : 당신은 큰 양식이있는 경우 양식 당신이 가진 자체에 전념 상태 트리의 일부를 고려할 수 있습니다 어디서나 보낼 수있는 json payload처럼 보이기 때문에 거기에 양식을 보내서 보낼 수 있습니다.

어쨌든,이 예제로 돌아 가기. 클릭하면 지금 handleClick. 텍스트 필드가 변경 될 때마다 업데이트됩니다

handleClick(event) { 
    console.log(this.props.textFieldValue.trim()); 
} 

때문에, 당신은 항상 당신의 상태에 대한 액세스 권한을 가지고 : 당신이해야 할 일은이 값을 얻는 것입니다. 또한 refs을 사용하면 다른 구성 요소의 해당 양식에 액세스하는 데 더 많은 시간을 할애 할 수 있기 때문에 refs 방법보다 유연성이 있습니다. 이 방법을 사용하면 모든 정보가 주에 있으므로 언제든지 소품을 관리하는 한 언제든지 정보에 액세스 할 수 있습니다. 이 도움이

create(e) { 
    e.preventDefault(); 
    let name = this.refs.inputText.input.value; 
    alert(name); 
    } 

    constructor(){ 
    super(); 
    this.create = this.create.bind(this); 
    } 

    render() { 
    return (
      <form> 
      <TextField ref="inputText" hintText="" floatingLabelText="Your name" /><br/> 
      <RaisedButton label="Create" onClick={this.create} primary={true} /> 
      </form> 
    )} 

희망 :

Answer 3

여기 onchange를 이벤트를 사용하는 것보다 더 나은 솔루션입니다, 우리는 직접 재료의 UI에 textField에 의해 생성 된 입력 값을 얻는다.