材质UI组件参考不起作用

Question

我正在构建一个小聊天应用程序.我使用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

你也可以使用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是必要的.

另外看一下你可以在react的材料-ui中看到这个如何获取密码字段值

Answer 2

尝试以下操作

    let emailRef =React.createRef();

在material-ui输入字段中使用inputRef

 <TextField label="Email Address" name="email" inputRef ={emailRef} />

只是使用inputRef而不是参考

Answer 3

在 onChange 方法中，您不需要使用ref来访问同一文本字段的值，material-ui TextField 在 onChange 方法中传递 2 个参数：

event, value

所以你可以这样写而不使用 ref：

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

根据文档：

onChange: 函数

当文本字段的值更改时触发的回调函数。

签名：函数（事件：对象，newValue：字符串）=> void

事件：针对文本字段的更改事件。

newValue：文本字段的新值。