我正在构建一个小聊天应用程序。我使用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库?
答案 0 :(得分:7)
您也可以使用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 on change让你在更改时更新状态,但是如果你需要保持值不变,那么inputRef是必要的。
另请查看您可以看到此How to get password field value in react's material-ui
答案 1 :(得分:3)
这种引用元素的方式已被弃用。见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) }}/>
将TextField引用为this.input
如果要获取TextField值,请使用this.input.getValue()
我做了类似here的事情。
答案 2 :(得分:1)
在onChange方法中,您不需要使用ref
来访问onChange方法中相同textfield,material-ui TextField传递2参数的值:
event, value
所以你可以这样写它而不使用ref:
<TextField ... onChange={(e, value) => this.handleChanges(value) }/>
根据DOC:
onChange:function
文本字段值更改时触发的回调函数。
签名:function(event:object,newValue:string)=&gt;无效
事件: 更改定位文本字段的活动。
newValue:新值 文本字段。
答案 3 :(得分:0)
此解决方案允许多个TextField元素,可通过此类。(名称)访问类。
我们仍然可以使用ref,但必须通过传入一个函数并在类上添加另一个属性(不是在props,refs或state上,而是在类本身上)。 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>
}
答案 4 :(得分:0)
如果您将无状态功能组件与材料ui一起使用,则可以使用react挂钩。
import React, { useState, useRef } from "react";
let MyComponent = (props) => {
let textInput = useRef(null);
return (
<div>
<Button
onClick={() => {
setTimeout(() => {
textInput.current.focus();
textInput.current.click();
textInput.current.value="myname";
}, 100);
}}
>
Focus TextField
</Button>
<TextField
fullWidth
required
inputRef={textInput}
name="firstName"
type="text"
placeholder="Enter Your First Name"
label="First Name"
/>
</div>
);
};
答案 5 :(得分:0)
尝试以下
let emailRef =React.createRef();
在material-ui输入字段中,使用inputRef
<TextField label="Email Address" name="email" inputRef ={emailRef} />
仅使用inputRef
而不是