onClick 후 페이지를 새로 고치지 않는 방법

Question

반응이 적은 클래스가 있습니다. 버튼을 클릭 한 후 화면에 결과를 표시하고 싶지만 디스플레이가 발생하기 전에 페이지가 다시로드됩니다.

어떻게해야합니까?

무엇이 누락 되었습니까?

import React, {Component} from 'react'; 

class InputFieldWithButton extends Component{ 
    constructor(props){ 
    super(); 
    this.state = { 
     message: '' 
    }; 
    } 

    handleChange(e){ 
    this.setState({ 
     message: e.target.value 
    }); 
    } 

    doSomething(e){ 
    return(
     <h1>{this.state.message}</h1> 
    ) 
    } 

    render(){ 
    return (
     <div> 
     <form > 
     <input type="text" placeholder="enter some text!" value= 
     {this.state.message} 
     onChange={this.handleChange.bind(this)}/> 
     <button onClick={this.doSomething.bind(this)}>Click me</button> 
      </form>    
     </div> 
    ) 
    } 
} 

export default InputFieldWithButton; 

Answer 1

귀하의 button는 form 내부 및 제출 트리거.
당신은이 preventDefault()method 그렇게을 중지 사용할 수 있습니다

doSomething(e) { 
    e.preventDefault(); 
    return (
     <h1>{this.state.message}</h1> 
    ) 
    } 

을 그건 그렇고,이 클릭 핸들러의 당신의 return 문은 순간에 이해되지 않는다.

편집 귀하의 코멘트에 후속으로
:

당신이 대가로 내 실수 뭔지 설명 할 수 있습니까?

실제로 실수는 아니지만, 반환 된 객체로 아무 것도하지 않으면이 문맥에서는 쓸모가 없습니다.
돌아 오는 <h1>{this.state.message}</h1>은 어디에서 어떻게 사용합니까?

화면에 입력 메시지를 표시하거나 숨기려면 conditional rendering을 사용하십시오.
상태로 showMessage과 같은 bool을 저장하고 true로 설정된 경우에만 메시지를 렌더링하십시오. 여기

작은 예입니다

class InputFieldWithButton extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     message: '', 
 
     showMessage: false 
 
    }; 
 
    } 
 

 
    handleChange = (e) => { 
 
    this.setState({ 
 
     message: e.target.value 
 
    }); 
 
    } 
 

 
    toggleMessage = (e) => { 
 
    e.preventDefault(); 
 
    this.setState({ showMessage: !this.state.showMessage }) 
 
    } 
 

 
    render() { 
 
    const { showMessage, message } = this.state; 
 
    return (
 
     <div> 
 
     <form > 
 
      <input 
 
      type="text" 
 
      placeholder="enter some text!" 
 
      value={message} 
 
      onChange={this.handleChange} 
 
      /> 
 
      <button onClick={this.toggleMessage}>Toggle Show Message</button> 
 
      {showMessage && <div>{message}</div>} 
 
     </form> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<InputFieldWithButton />, document.getElementById('root'));

<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="root"></div>

그런데, 그것은 bind 나쁜 관행으로 간주됩니다 render 방법 내부의 기능, 당신은에 함수의 새로운 인스턴스를 생성하기 때문에 각 렌더링 호출.

constructor(props) { 
    super(props); 
    this.handleChange = this.handleChange.bind(this); 
    } 

을 아니면 어휘 맥락에서 this를 참조합니다 화살표 기능을 사용할 수 있습니다 : : 대신 한 번만 실행됩니다 생성자 내에서 그것을 할 것은

handleChange = (e) => { 
    this.setState({ 
     message: e.target.value 
    }); 
    } 

이 내가에 사용했던 것입니다 내 예.

Answer 2

당신은 button로 버튼에 type 속성을 설정 buttons'type

<button type="button"> 

Answer 3

을 지정하지 않는 것입니다. 기본값은 form에 랩핑되었으므로 submit입니다. 그래서 새로운 버튼 HTML은 다음과 같아야합니다의

<button type="button" onClick={this.doSomething.bind(this)}>Click me</button>