재질 UI 구성 요소 참조가 작동하지 않습니다.

Question

약간의 대화방을 만들고 있습니다. application.i는 Material UI TextField를 사용하여 사용자 메시지를 입력했습니다. 하지만 나는 그것을 언급 할 수 없다. 나는 이것에 관해 읽었다. 그들은 refs을 지원하지 않는다고 말했다. 이것은 내 코드입니다. 작동합니다.

class App extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     q: "default" 
    }; 

    } 
    handleChanges(val) { 
    this.setState({ q: val }); 
    } 
    handleSearch(val) { 
    this.setState({ q: val }); 
    console.log(this.state.q); 
    } 
    render() { 
    return (
     <div className="App"> 
     <h1> {this.state.q}</h1> 
     <Row className="show-grid"> 
      <Col sm={2} md={4} className="contact"><h5>contact</h5><br /></Col> 
      <Col sm={10} md={8} className="chat grid-border"><h5>chat</h5><br /> 
      <div className="history"></div> 
      <div className="message top-border"> 

       <input type="text" ref="question" onChange={(e) => { this.handleChanges(this.refs.question.value) }} /> 
       <MuiThemeProvider> 
       <FlatButton label="Primary" primary={true} onTouchTap={(e) => { e.preventDefault(); this.handleSearch(this.refs.question.value); }} /> 
       </MuiThemeProvider> 

      </div> 
      </Col> 
     </Row>{/*show-grid ends here*/} 
     </div> 
    ); 
    } 
} 
export default App; 

나는 물질이 UI TextField 대신 기본 HTML 입력 태그를 사용하는 경우는, 기준의 값을 얻을 수 없다.

<MuiThemeProvider> 
     <TextField hintText="Ask your question" fullWidth={true} multiLine={true} rows={2} rowsMax={4} type="text" ref="question" onChange={(e) => { this.handleChanges(this.refs.question.value) }}/> 
</MuiThemeProvider> 

이에 대한 대안 또는 대안 UI 라이브러리가 있습니까?

Answer 1

, 당신은이 매개 변수의 onChange 방법에 같은 텍스트 필드, 재료 UI를 텍스트 필드 패스의 값에 액세스 할 수 ref를 사용할 필요가 없습니다 REF :

<TextField ... onChange={(e, value) => this.handleChanges(value) }/> 

로서 DOC 당 :

의 onChange : 함수

텍스트 필드의 값이 변경되면 시작되는 콜백 함수입니다. 텍스트 필드 타겟팅 변경 이벤트 :

이벤트 공극 =>

서명 : 함수 (문자열 이벤트 : 객체 NEWVALUE).

newValue : 텍스트 필드의 새 값입니다.

Answer 2

이 참조 방법은 사용되지 않습니다. 이 사용 https://facebook.github.io/react/docs/refs-and-the-dom.html

시도 참조 :

<TextField hintText="Ask your question" fullWidth={true} multiLine={true} rows={2} rowsMax={4} type="text" ref={(input) => { this.input = input; }} onChange={(e) => { this.handleChanges(this.refs.question.value) }}/> 

을 그리고 당신이 텍스트 필드의 값을 얻고 싶은 경우에 this.input

으로 텍스트 필드를 참조, this.input.getValue()

내가 그 here 같은 짓을 사용합니다.

event, value 

그래서 당신이 사용하지 않고 이런 식으로 쓸 수 있습니다 :

의 onChange 방법에

Answer 3

inputRef도 사용할 수 있습니다. 이 소품은 재료 1.0에서 구할 수 있습니다.

<TextField 
    className={classes.textField} 
    inputRef={input => (this._my_field = input)} 
    label="My field" 
    fullWidth 
    margin="normal" 
    defaultValue={this.props.my_field} 
    onChange={this.handleChange("dhis_password")} 
/> 

온 변화하자가 변화 할 때의 상태를 업데이트하지만 값이 변경되지 얻을 필요가있는 경우, 다음 inputRef이 필요가.

또한 당신의 모습이 How to get password field value in react's material-ui

Answer 4

이 솔루션은이 액세스 여러 텍스트 필드 요소를 허용 볼 수 있습니다. 클래스 내부 접근 (이름).

여전히 ref를 사용할 수 있지만 함수를 전달하고 클래스에 다른 속성을 추가해야합니다 (props, refs 또는 state가 아니라 클래스 자체). 머티리얼 UI는 값을 가져올 수있는 .getValue() 메소드를 제공합니다.

class App extends Component { 
... 
handleQuestion() { 
    this.setState({ 
     q : this.question.getValue(), 
     /** add more key/value pairs for more inputs in same way **/ 
    }) 
} 
... 
<MuiThemeProvider> 
    <TextField 
     hintText="Ask your question" 
     fullWidth={true} 
     multiLine={true} 
     rows={2} 
     rowsMax={4} 
     type="text" 
     ref={(q) => { this.question = q; }} 
     onChange={ this.handleQuestion } 
    /> 
</MuiThemeProvider> 



}