テキストフィールド値を素材uiとreactjsで返す

Question

ただ、リアクションの学習を開始しました。送信ボタンを押したときにテキストフィールドから値を戻す方法がわかりません。私はここの例に従っています：https://material-ui-next.com/demos/dialogs/しかし、彼らはテキストフィールドの価値を得る方法を決してカバーしません。私はたくさんの方法を試しましたが、値は未定義になっています。ここに私の現在のコードは次のとおりです。

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> 
    ); 
    } 

}; 

Answer 1

あなたはaddTorrentPopupコンポーネントにその値を格納するためのTextField onChangeメソッドを使用することができます。

  <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}); 
     } 

Answer 2

リアクションは、入力（または他の要素）に添付できる特別な属性refをサポートしています。

ref属性はコールバック関数を使用し、コールバックはフォームが送信された直後に実行されます。ここではそれがどのように動作するかだ -

<form> 
    <input 
     type="text" 
     value"this input element will be passed" 
     ref={$el=>{ 
     //You got the input value here 
     let inputData = $el.value; 
     }} 
/> 

材質UI のTextFieldコンポーネントは、ネイティブのinput要素に追加されますinputRef小道具をサポートしています。

だから、これはあなたが

<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 
    }} 
/> 

要約 add--するために必要なものです：あなたはのTextField部品のinputRef小道具を通じてref方法を渡すことで、入力の値を持つことができますが。

は、それが

を役に立てば幸い