2017-05-14 14 views
2

少しチャットしていますapplication.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> 

このため任意の回避策や代替UIライブラリはありますか?

答えて

1

、あなたが同じテキストフィールドの値にアクセスするためにrefを使用する必要があり、材料-UIのTextFieldパスのonChangeメソッドでは2つのパラメータはありません:

event, value 

ですから、使用しなくても、このようにそれを書くことができますREF:

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

としてDOCあたり:

のonChange:機能

テキストフィールドの値が変更されたときに発生するコールバック関数。

署名:関数(イベント:オブジェクト、newValueに:文字列)=>ボイド

イベント:テキストフィールドを標的 変更イベント。

newValue: テキストフィールドの新しい値。

+0

あなたの努力に感謝します。 – IsuruAb

+0

良い解決策。別の要素を追加すると、同じメソッドが機能しません。重複したメソッドを記述する必要があります。理想的にはrefで、2つのTextFieldでref = "a"とref = "b"を指定すると、setStateメソッドでthis.refs.a.valueとthis.refs.b.valueをチェックできますが、これは機能しませんマテリアルUIを使用します。 –

3

このように要素を参照する方法は推奨されていません。

<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) }}/> 

そして、あなたは、TextField値を取得したい場合はthis.input

としてTextFieldを参照して、私はそのhereのような何かをしたthis.input.getValue()

を使用します。これを使用してみてくださいhttps://facebook.github.io/react/docs/refs-and-the-dom.html

を参照してください。 onChange方法で

+0

動作しません。それは無期限に – TeodorKolev

+0

を返します。これは動作します。あなたのコードで何かがあるかもしれません。あなたのコードを共有できますか? –

1

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

0

を見ることができますを見て、このことによってアクセス可能、複数のTextField要素を可能にしています。(名)クラスの内部にアクセス可能。

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> 



} 
関連する問題