少しチャットしています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ライブラリはありますか?
あなたの努力に感謝します。 – IsuruAb
良い解決策。別の要素を追加すると、同じメソッドが機能しません。重複したメソッドを記述する必要があります。理想的にはrefで、2つのTextFieldでref = "a"とref = "b"を指定すると、setStateメソッドでthis.refs.a.valueとthis.refs.b.valueをチェックできますが、これは機能しませんマテリアルUIを使用します。 –