React Redux表单2使用onSubmit和redirect提交

Question

I'm trying to improve an app with weather and polution. The main idea is to have 2 submit buttons with redirects to other url's. I've tried some options, the last as you see was about making 2 onClick functions, but I can't pass the data to onFormSubmit function.

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {fetchWeather} from '../actions/index';
import { Link } from 'react-router';
import { reduxForm } from 'redux-form';

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

        this.state = {term:''};

        this.onInputChange= this.onInputChange.bind(this);
        this.onFormSubmit = this.onFormSubmit.bind(this);
    }
static contextTypes = {
    router: React.PropTypes.object
  };

onInputChange(event){

    this.setState({term : event.target.value});
};




onFormSubmit(event){
    event.preventDefault();

if (this.numberButton == 1){
return (this.props.fetchWeather(this.state.term)
    .then(() => {
     this.context.router.push('/')}));
} else if (this.numberButton == 2){

} else {
    return console.log('Went wrong');
}



    this.setState({term:''});

};


    render(){
        return (
            <div>
            <form 
          onSubmit={this.onFormSubmit} 
            className="input-group">
                <input 
                placeholder="Put here a US city name"
                className="form-control"
                value={this.state.term}
                onChange={this.onInputChange}
                 />
                <span className="input-group-btn" role="group">
                        <button type="submit" name="button1" value="Weather" className="btn btn-secondary btn-success" onClick={ () => a=1} >Weather</button>
                        <button type="submit" name="button2" value="Polution" className="btn btn-secondary btn-info" onClick={() =>  a =2} >Polution</button>
                    </span>

                </form>

                </div>
        )
    }

}

function mapDispatchToProps(dispatch){
    return bindActionCreators({fetchWeather}, dispatch);
}

export default connect(null, mapDispatchToProps)(SearchBar);  

Answer 1

There are two different ways that you can fix this:

1) Put an id on each button (eg 'weather-button'), then check e.target.id === 'weather-button' instead of this.numberButton == 1. I don't see this.numberButton declared anywhere, so that condition will never be true.

2) Remove the form wrapper altogether, and provide a different handleClick to each button.

handleWeatherClick = e => { ... }
handlePollutionClick = e => { ... }

...

<span className="input-group-btn" role="group">
    <button className="btn btn-secondary btn-success" onClick={this.handleWeatherClick}>
        Weather
    </button>
    <button className="btn btn-secondary btn-info" onClick={this.handlePollutionClick}>
        Pollution
    </button>
</span>