お世話になっております。
今react + rails(react-rails)を使用してアプリケーションを作成しているのですがエラーに悩まされております。
症状的にはonClick属性を付与するとレンダリングされないという内容になります。
だめな例
js
1export default class Popup extends React.Component{ 2 constructor(props){ 3 super(props) 4 } 5 componentWillMount(){ 6 this.setState({ 7 show: true 8 }) 9 } 10 handleClick(){ 11 console.log('name') 12 } 13 render(){ 14 return( 15 <div className={`c-popup c-popup--white ${this.state.show ? 'is-active' : ''}`}> 16 <article className="c-popup__box"> 17 <button onClick={() => console.log('aiueo')} className="c-popup__box-close"> //問題はここ 18 <i className="icon ion-close"></i> 19 </button> 20 </article> 21 </div> 22 ) 23 } 24}
レンダリングされる例
js
1export default class Popup extends React.Component{ 2 constructor(props){ 3 super(props) 4 } 5 componentWillMount(){ 6 this.setState({ 7 show: true 8 }) 9 } 10 handleClick(){ 11 console.log('name') 12 } 13 render(){ 14 return( 15 <div className={`c-popup c-popup--white ${this.state.show ? 'is-active' : ''}`}> 16 <article className="c-popup__box"> 17 <button className="c-popup__box-close"> // onClickをなくすとレンダリングされる 18 <i className="icon ion-close"></i> 19 </button> 20 </article> 21 </div> 22 ) 23 } 24}
どなたか理由がわかる方いらっしゃいませんでしょうか。
また、react-railsのデバッグの方法でやりやすい方法をご存じの方がいらっしゃいましたらご教授お願いしたいです。。。。
あなたの回答
tips
プレビュー