React에서 클릭 시 입력 텍스트 값을 얻는 방법JS

React에서 클릭 시 입력 텍스트 값을 얻는 방법JS

ReactJs를 배우고 있는데 React에서 입력 텍스트 값을 얻는 방법을 알고 싶습니다.간단한 클릭 이벤트를 사용하는 JS.저는 튜토리얼을 따라갔고 텍스트 입력 파라미터를 얻을 수 있었습니다.하지만 왠지 그 가치를 얻을 수 없다.바보같은 질문인건 알지만, 난 이것과 싸우고 있어.제 코드를 확인하고 어떤 문제가 있는지 알려주세요.

var MyComponent = React.createClass({
  handleClick: function() {
    if (this.refs.myInput !== null) {
        var input = this.refs.myInput;
            var inputValue = input.value;
      alert("Input is", inputValue);
    }
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="Alert the text input"
          onClick={this.handleClick}
        />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('container')
);

다음은 동일한 jsfiddle 링크의 jsfiddle을 나타냅니다.

우선, 당신은 앞으로 넘어갈 수 없다.alert두 번째 인수, 대신 연결 사용

alert("Input is " + inputValue);

Example

그러나 입력에서 값을 얻으려면 다음과 같은 상태를 더 잘 사용합니다.

var MyComponent = React.createClass({
  getInitialState: function () {
    return { input: '' };
  },

  handleChange: function(e) {
    this.setState({ input: e.target.value });
  },

  handleClick: function() {
    console.log(this.state.input);
  },

  render: function() {
    return (
      <div>
        <input type="text" onChange={ this.handleChange } />
        <input
          type="button"
          value="Alert the text input"
          onClick={this.handleClick}
        />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

이를 위해서는 두 가지 방법이 있습니다.

1. 텍스트 입력을 포함하는 상태를 생성자에 만듭니다.매번 상태를 업데이트하는 onChange 이벤트를 입력 상자에 첨부합니다.그런 다음 클릭해서 상태 개체에 경고만 할 수 있습니다.

2. handle Click: function() { alert(this.refs.myInput.value);}

심플:

import {useState} from 'react';
 const[value, setValue] = useState(""); 
    function handle() {
        alert(value)
    }

<input value={value} onChange={(e) => {setValue(e.target.value)}} />
<button onClick={handle}>Button</button>

언급URL : https://stackoverflow.com/questions/38443227/how-to-get-input-text-value-on-click-in-reactjs