소재 ui와 반응 물을 사용하여 텍스트 필드 값 반환

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 구성 요소에 값을 저장하기 위해 텍스트 필드 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

React는 입력 (또는 다른 요소)에 첨부 할 수있는 특수 특성 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 텍스트 필드는 구성 요소는 기본 입력 요소에 추가됩니다 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--해야 할 것입니다 : 당신은 텍스트 필드 구성 요소의 inputRef 소품을 통해 ref 방법을 전달하여 입력의 값을 가질 수 있습니다 .

는

도움이되기를 바랍니다