ReactJS - 렌더링하는 동안 onClick 버튼이 호출됩니다.

type="range"이라는 양식이 있습니다. 이제 폼과 같은 값을 변경하는 3 개의 버튼을 추가하고 싶습니다. 어떤 이유로, 버튼 onClick 이벤트는 render 함수를 호출 할 때 반복적으로 호출되는 것처럼 보입니다. ReactJS - 렌더링하는 동안 onClick 버튼이 호출됩니다.

이

내 구성 요소입니다

class Slider extends Component { 
    constructor(props) { 
     super(props); 

     this.handleChange = this.handleChange.bind(this); 
     this.handleButton = this.handleButton.bind(this); 
    } 

    handleChange() { 
     this.props.onSetCountdown(parseInt(this.refs.seconds.value, 10)); 
    } 

    handleButton(value) { 
     this.props.onSetCountdown(parseInt(value, 10)); 
    } 

    render() { 
     return(
      <div> 
       <form className={styles.ttSlider} ref="form"> 
        <input max="480" min="60" name="slider" onChange={this.handleChange} ref="seconds" type="range" value={this.props.totalSeconds}/> 
        <button onClick={this.handleButton(60)}>1min</button> 
        <button onClick={this.handleButton(180)}>3min</button> 
        <button onClick={this.handleButton(300)}>5min</button> 
       </form> 
      </div> 
     ) 
    } 
} 

Slider.propTypes = { 
    totalSeconds: React.PropTypes.number.isRequired, 
    onSetCountdown: React.PropTypes.func.isRequired 
};

그리고 이것은 부모 구성 요소에서입니다 : 렌더링

handleSetCountdown(seconds) { 
     this.setState({ 
      count: seconds 
     }); 
    }

상위 구성 요소에서이 오류입니다

<Slider totalSeconds={count} onSetCountdown={this.handleSetCountdown}/>

그 I 얻으십시오 :

경고 : setState (...) : 기존 상태 인 (예 : render 또는 다른 구성 요소의 생성자)에서 업데이트 할 수 없습니다. 렌더링 방법은 소도시의 순수한 기능이어야하며 상태 여야합니다. 생성자 부작용은 anti-pattern이지만 을 componentWillMount으로 이동할 수 있습니다.

나에게 이것은 구성 요소가 여전히 렌더링되는 동안 onClick 버튼이 호출되는 것처럼 보입니다. 내가 도대체 뭘 잘못하고있는 겁니까?

출처

2017-01-02 Miha Šušteršič

가능한 중복 http://stackoverflow.com/questions/33846682/react-onclick-function-fires-on-에서 라인을 삭제할 수 있습니다 세우다) – Swapnil

함수를 onClick 이벤트에 전달하는 대신 함수를 직접 호출하기 때문입니다.

이런 식으로 일을 시도해보십시오

<button onClick={() => { this.handleButton(60)}}>1min</button> 
<button onClick={() => { this.handleButton(180)}}>3min</button> 
<button onClick={() => { this.handleButton(300)}}>5min</button>

여기에 답을 찾았습니다 React onClick function fires on render

는 희망이 도움이!

출처

2017-01-02 15:02:03 avilac

어떤 이유로 든 anon 함수를 사용하지 않으려면 두 번째 방법은 렌더링 함수에서 bind를 직접 사용하는 것입니다. 그런 다음 당신은 당신의 생성자 :

<button onClick={this.handleButton.bind(this, 60)}>1min</button>

[렌더링에 대한 반작용의 onclick 기능 화재] (의

출처

2017-01-02 15:37:25 MariuszJasinski

ReactJS - 렌더링하는 동안 onClick 버튼이 호출됩니다.

답변

관련 문제