React Redux Formular 2 unterwirft sich mit onSubmit und Redirect

Question

Ich versuche, eine App mit Wetter und Verschmutzung zu verbessern. Die Hauptidee besteht darin, 2 Schaltflächen mit Weiterleitungen zu anderen URLs zu senden. Ich habe einige Optionen ausprobiert, die letzte, wie Sie sehen, ging es darum, 2 onClick-Funktionen zu machen, aber ich kann die Daten nicht an die onFormSubmit-Funktion übergeben.

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

Es gibt zwei verschiedene Möglichkeiten, wie Sie dieses Problem beheben:

1) auf jeder Taste eine ID anlegen (zB 'Wetter-Taste'), dann überprüfen Sie e.target.id === ' weather-button 'statt this.numberButton == 1. Ich sehe this.numberButton nirgendwo deklariert, so dass diese Bedingung niemals wahr sein wird.

2) Entfernen Sie den Formularwrapper ganz und geben Sie einen anderen handleClick für jede Schaltfläche an.

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>