は、ボタンを作成するリアクト - 非ハードコードされたプロパティ

Question

私が反応するボタンを作成しようとしていますし、ここに現在のコードです：

var React = require('react'); 

var buttonStyle = { 
    margin: '10px 10px 10px 0' 
}; 

var Button = React.createClass({ 
    render: function() { 
    return (
     <button 
     className="btn btn-default" 
     style={buttonStyle} 
     onClick={this.props.handleClick}>{this.props.label}</button> 
    ); 
    } 
}); 

module.exports = Button; 

問題は、私はclassNameのハードコードされ、ないonclickのを望んでいないということですが。

私は例えば...このコードの外側のクラスとのonclickイベントを追加できるようにしたい：

<Button bStyle="myChosenStyles" onclick="myChosenFunction" /> 

はどうすればこれを行うことができますか？

Answer 1

あなたは例えば、正しくクラス名を渡すか、小道具にイベントハンドラをクリックし、コンポーネントにそれを使用する必要があります。

var Button = React.createClass({ 
    render: function() { 
    return (
     <button 
     className={this.props.bStyle} 
     style={buttonStyle} 
     onClick={this.props.onclick}>{this.props.label}</button> 
    ); 
    } 
}); 

// use {} when passing myChosenFunction to the props 
<Button bStyle="myChosenStyles" onclick={myChosenFunction} label="myLabel" /> 

あなたのコードは、現在のことができます（ボタンコンポーネントのプロパティであるクリックハンドラ​​にあり単純に名前をonclickに変更してください）。一重引用符または二重引用符を使用すると、文字列変数（label、またはclassNameなど）を渡すことができます。オブジェクト、関数、数値などを渡す場合は、中括弧で囲む必要があります{}。