Material UI組件引用不起作用

我正在構建一個小聊天應用程序.i已使用Material UI TextField輸入用戶消息。但我不能提及它。我讀了這個。他們說他們不支持refs。這是我的代碼。它的工作原理。Material UI組件引用不起作用

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>

是否有任何解決方法或替代用戶界面庫？

來源

2017-05-14 IsuruAb

在的onChange方法，你不需要使用ref訪問的onChange方法2點的參數相同的文本框，材料的UI文本字段通的價值：

event, value

所以，你可以把它寫像這樣不使用參考：

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

作爲每DOC：

的onChange：功能

當文本字段的值發生更改時觸發的回調函數。

簽名：功能（事件：對象，NEWVALUE：字符串）=>空隙

事件：更改事件指定文本字段中。

newValue：文本字段的新值。

來源

2017-05-14 04:39:39

感謝您的努力。 – IsuruAb

好的解決方案。如果我們添加另一個元素，相同的方法將無法工作。將需要編寫一個重複的方法。理想情況下，在2個TextField上給定ref =「a」和ref =「b」的refs，我們可以在setState方法中檢查this.refs.a.value和this.refs.b.value，但這不起作用與材質用戶界面。 –

這種引用元素的方式已被棄用。請參閱本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。

來源

2017-05-14 04:05:41

不工作。它返回undefined – TeodorKolev

它的工作原理可能與你的代碼有關。你能分享你的代碼嗎？ –

您也可以使用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")} 
/>

on變化讓我們更新狀態，但如果您需要更改該值，則需要inputRef。

也看看你可以看到這個How to get password field value in react's material-ui

來源

2017-11-16 12:14:52

該解決方案允許多個文本字段元素，通過這個訪問。（名）類的內部訪問。

我們仍然可以使用ref，但必須通過傳入一個函數並在該類上添加另一個屬性（不是在道具，參考或狀態上，而是在類本身上）。 Material 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> 



}

來源

2017-12-17 02:03:57

Material UI組件引用不起作用

回答

相關問題