React handle form submit

Question

React/Reduxでフォームを作成しようとしています。今のところ私は、フォームが送信されるときにフォームが私の関数handleSubmitをトリガするようにしたい。しかし

export default class AssetsAdd extends React.Component { 

    componentDidMount() { 
    console.log(this) 
    } 

    handleSubmit(event) { 
    if (this.refs.titleInput !== '') { 
     event.preventDefault(); 
     var asset = { 
     date: '', 
     title : this.refs.titleInput.value, 
     id : '', 
     type: this.refs.typeInput.value 
     } 

     return this.props.dispatch(addAsset(asset)) 
    } 


    } 

    render() { 
    return (
     <div> 
     <Row> 
      <Portlet title='New Asset' form> 
      <Form horizontal onSubmit={this.handleSubmit}> 
       <FormGroup> 
       <Label text='Title' size='3' /> 
       <Input ref="titleInput" placeholder='Enter asset title' size='4'/> 
       </FormGroup> 
       <FormGroup> 
       <Label text='Type' size='3' /> 
       <Input ref="typeInput" placeholder='Enter asset type' size='4'/> 
       </FormGroup> 
       <FormGroup> 
       <Label text='Description' size='3' /> 
       <Input ref="descriptionInput" placeholder='Enter asset description' size='4'/> 
       </FormGroup> 
       <FormGroup> 
       <Label text='Documentation' size='3' /> 
       <Input ref="documentationInput" placeholder='Enter documentation URL' size='4'/> 
       </FormGroup> 
       <FormActionBar> 
       <SubmitButton value='Submit'/> 
       <CancelButton value='Cancel'/> 
       </FormActionBar> 
      </Form> 
      </Portlet> 
     </Row> 
     </div> 
    ) 
    } 
} 

function mapStateToProps(state) { 
    return { 
    assets: state.assets 
    }; 
} 

export const AssetAddContainer = connect(mapStateToProps)(AssetsAdd); 

...機能は、ページのロードに瞬時にトリガされたように見える瞬間に、私は、コードの残りの部分はすべて正しいまだ私の主な関心は、今だけでトリガをonSubmitアクションを取得しているではありません知っています右の瞬間に

ありがとうございます！

Answer 1

handleSubmitをバインドしていないようです。 the docsから

：

方法は 彼らは自動的にインスタンスにこれを結合しないことを意味し、通常のES6クラスと同じセマンティクスに従ってください。あなたは3つのオプション

1. は、コンストラクタを追加し、そこに結合を行うを持って

（推奨）：直接

this.handleSubmit = this.handleSubmit.bind(this);

バインド：

onSubmit={this.handleSubmit.bind(this)}

使用=>機能

onSubmit={() => this.handleSubmit}

Answer 2

あなたは次にSubmmitButtonコンポーネントのレンダリング機能のボタンにその小道具を割り当てる小道具

<SubmitButton value='Submit' onSubmit={this.handleSubmit.bind(this)}/> 

としてhandleSubmitを渡す必要があります。

// submmit button component @render method 

<button onClick={this.props.onSubmit} >Submit</button>