Javascript 使用材质ui和reactjs返回textfield值

刚开始学习React，当我点击submit按钮时，我不确定如何从我的文本字段中获取值。我在这里遵循这些示例：但它们从未涉及如何获取textfield的值。我尝试了很多方法，但是一直没有定义值。这是我目前的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import Button from 'material-ui/Button';
import TextField from 'material-ui/TextField';
import { withStyles } from 'material-ui/styles';
import PropTypes from 'prop-types';
import Dialog, {
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
} from 'material-ui/Dialog';
import InsertLinkIcon from 'material-ui-icons/Link';
import ReactTooltip from 'react-tooltip'
import Icon from 'material-ui/Icon';
import IconButton from 'material-ui/IconButton';


const button = {
  fontSize: '60px',
  paddingRight: '20px',
  paddingLeft: '20px',
}

const inlineStyle = {
  display: 'inline-block',
}

export default class addTorrentPopup extends React.Component {

  state = {
    open: false,
  };

  handleClickOpen = () => {
    this.setState({ open: true });
  };

  handleRequestClose = () => {
    this.setState({ open: false });
  };

  handleSubmit = () => {
      this.setState({ open: false });
      let magnetLinkSubmit = this.state.textValue;
      console.log("Sending magnet link: ", magnetLinkSubmit);
      ws.send(magnetLinkSubmit);
  }

  render() {
    const { classes, onRequestClose, handleRequestClose, handleSubmit } = this.props;
    return (
      <div style={inlineStyle}>
        <IconButton onClick={this.handleClickOpen} color="primary" data-tip="Add Magnet Link" style={button}  centerRipple aria-label="Add Magnet Link" >
        <ReactTooltip place="top" type="light" effect="float" />
        <InsertLinkIcon />
      </IconButton>
        <Dialog open={this.state.open} onRequestClose={this.handleRequestClose}>
          <DialogTitle>Add Magnet Link</DialogTitle>
          <DialogContent>
            <DialogContentText>
              Add a Magnet Link here and hit submit to add torrent...
            </DialogContentText>
            <TextField
              autoFocus
              margin="dense"
              id="name"
              label="Magnet Link"
              type="text"
              placeholder="Enter Magnet Link Here"
              fullWidth
            />
          </DialogContent>
          <DialogActions>
            <Button onClick={this.handleRequestClose} color="primary">
              Cancel
            </Button>
            <Button onClick={this.handleSubmit} color="primary">
              Submit
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }

};

从“React”导入React；
从“react dom”导入react dom；
从“物料界面/按钮”导入按钮；
从“物料界面/文本字段”导入文本字段；
从“材质ui/样式”导入{withStyles}；
从“道具类型”导入道具类型；
“导入”对话框{
对话行动，
对话内容，
对话内容文本，
对话标题，
}从“材料界面/对话框”；
从“材料ui图标/链接”导入InsertLinkIcon；
从“反应工具提示”导入反应工具提示
从“物料界面/图标”导入图标；
从“物料界面/图标按钮”导入图标按钮；
常量按钮={
fontSize:'60px'，
paddingRight:'20px'，
左填充：“20px”，
}
常量inlineStyle={
显示：“内联块”，
}
导出默认类AddTorrent.Component{
状态={
开：错，
};
handleClickOpen=（）=>{
this.setState（{open:true}）；
};
HandlerRequestClose=（）=>{
this.setState（{open:false}）；
};
handleSubmit=（）=>{
this.setState（{open:false}）；
让magnetLinkSubmit=this.state.textValue；
日志（“发送磁铁链接：”，MagnetLink提交）；
发送（magnetLinkSubmit）；
}
render（）{
const{classes，onRequestClose，handleRequestClose，handleSubmit}=this.props；
返回(
添加磁铁链接
在这里添加磁铁链接，点击提交添加torrent。。。
取消
提交
);
}
};

您可以使用TextField

onChange

方法将其值存储在

addTorrentPopup

组件中

         <TextField
          onChange={this.setTextValue}
          autoFocus
          margin="dense"
          id="name"
          label="Magnet Link"
          type="text"
          placeholder="Enter Magnet Link Here"
          fullWidth
        />

        ...

        // Implementation of setTextValue method
        setTextValue = (event) => {
          this.setState({textValue: event.target.value});
        }

...
//setTextValue方法的实现
setTextValue=（事件）=>{
this.setState（{textValue:event.target.value}）；
}

React支持一个特殊属性

ref

，可以附加到输入（或任何其他元素）

ref属性接受一个回调函数，并且在提交表单后将立即执行回调。下面是它的工作原理--

摘要：您可以通过将

ref

方法传递到TextField组件的

inputRef

属性来获得输入值

         <TextField
          onChange={this.setTextValue}
          autoFocus
          margin="dense"
          id="name"
          label="Magnet Link"
          type="text"
          placeholder="Enter Magnet Link Here"
          fullWidth
        />

        ...

        // Implementation of setTextValue method
        setTextValue = (event) => {
          this.setState({textValue: event.target.value});
        }

希望能有帮助

<TextField
    autoFocus
    margin="dense"
    id="name"
    label="Magnet Link"
    type="text"
    placeholder="Enter Magnet Link Here"
    fullWidth
    inputRef={$el=>{
        //you got the input value here
        const inputValue = $el.value
    }}
/>