Reactjs 如何在不使用onChange事件的情况下从物料界面获取TextField的输入值？

我试图使用

this.refs.myField.getValue（）

或

this.refs.myTextField.input.value

。但是，它们被贬值了

我不想在

TextField

中使用

onChange

，我只是在单击“转换”按钮时转换文本

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

class Test extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      text: '',
    };
  };

  handleConvertString = (event) => {
    let str = this.refs.myField.getValue();
    this.setState({
      text: str.replace(/[dog]/gi, ''),
    })
  };
  render() {
    return (
      <div>
        <TextField
          ref="myField"
          fullWidth
        />
        <Button variant="outlined" href="#outlined-buttons" onClick={this.handleConvertString}>
          Convert
        </Button>
        <h1>{this.state.text}</h1>
      </div>
    )
    }
}

export default Test;

从“React”导入React；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/Button”导入按钮；
类测试扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
文本：“”，
};
};
handleConvertString=（事件）=>{
设str=this.refs.myField.getValue（）；
这是我的国家({
文本：str.replace（/[dog]/gi'，），
})
};
render（）{
返回(
转换
{this.state.text}
)
}
}
导出默认测试；

看一看

您试图访问文本区域的底层值，因此需要HTMLDOM元素的ref

对于文本区域，请使用：

<TextField
  inputRef={ref => { this.inputRef = ref; }}
  fullWidth
/>

{this.inputRef=ref；}
全宽
/>

然后在方法中使用

this.inputRef.value

访问值

const { register, handleSubmit } = useForm(); 
<form onSubmit={handleSubmit(formSubmit)}>
              <label>
                
              <TextField
                  id="outlined-basic"
                  label="email"
                  name="email"
                  fullWidth
                  variant="outlined"
                  inputRef={register}
                  required
                />
              </label>
              <br />
              <label>
                <br />
                
                <TextField
                  id="outlined-secondary:cyan"
                  label="password"
                  name="password"
                  type="password"
                  fullWidth
                  variant="outlined"
                  inputRef={register}
                  required
                />
              </label>

              <br />
              <br />

              <Button
                className={classes.root}
                variant="contained"
                color="primary"
                fullWidth
                type="submit"
              >
                Login
              </Button>
             
            </form>

const formSubmit = (data) => {
    // Post Data
    const postData = {
      email: data.email,
      pass: data.password,
    };

    console.log(data)