Forma Redux: jak obsługiwać wiele przycisków?

Question

Próbuję dodać drugi przycisk przesyłania do redux-form.

Oba przyciski powinny wywołać akcję, która zapisuje dane, ale w zależności od naciśniętego przycisku należy przekierować użytkownika na różne strony.

Tak zdefiniowałem program obsługi, który przekazuję do formularza jako onSubmit.

Ale o ile widzę tylko formę dane jest przekazywana do tej Handler:

docs na handleSubmit uwaga:

funkcja ma być przekazany do <form onSubmit={handleSubmit}> lub <button onClick={handleSubmit}>. Zostanie uruchomione sprawdzanie poprawności, zarówno synchronizacja, jak i asynchronizacja, a jeśli formularz jest ważny, , wywoła on this.props.onSubmit(data) wraz z zawartością danych formularza.

To, czego mi brakuje, to również sposób przekazania informacji o naciśnięciu przycisku (np. Zdarzeniu kliknięcia) do mojej procedury obsługi onSubmit, dzięki czemu mogę zapisywać i prowadzić trasę zgodnie z przeznaczeniem.

Answer 1

Istnieje wiele sposobów, aby to zrobić, ale wszystkie one wiążą się z dołączaniem danych przycisku w zależności od tego, który przycisk został naciśnięty. Oto wersja wbudowana.

class Morpheus extends Component { 
    render() { 
    const { handleSubmit } = this.props; 
    return (
     <div> 
     Fields go here 
     <button onClick={handleSubmit(values => 
      this.props.onSubmit({ 
      ...values, 
      pill: 'blue' 
      }))}>Blue Pill</button> 
     <button onClick={handleSubmit(values => 
      this.props.onSubmit({ 
      ...values, 
      pill: 'red' 
      }))}>Red Pill</button> 
     </div> 
    ); 
    } 
} 

export default reduxForm({ 
    form: 'morpheus' 
})(Morpheus) 

handleSubmit obsługuje wszystkie sprawdzanie poprawności i etażerka, a jeśli wszystko jest ważne, to wywołać funkcję nadane mu z wartościami formularza. Dlatego nadajemy mu funkcję, która dodaje dodatkowe informacje i wywołuje onSubmit().

Answer 2

@mibbit onSubmit to funkcja, którą definiujesz (przynajmniej tak mówi lekarz: look the onSubmit method). To jest dla redux-formularz 7.x następujący przykład @Erik R.

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

     this.state = {}; 
     this.onSubmit = this.onSubmit.bind(this); 
    } 

    onSubmit(values, pill) { 
     // do magic here 
    } 

    render() { 
     const { 
      handleSubmit 
     } = this.props; 
     return (< 
      div > 
      Fields go here < 
      button onClick = { 
       handleSubmit(values => 
        this.onSubmit({ 
         values, 
         pill: 'blue' 
        })) 
      } > Blue Pill < /button> < 
      button onClick = { 
       handleSubmit(values => 
        this.onSubmit({ 
         values, 
         pill: 'red' 
        })) 
      } > Red Pill < /button> < 
      /div> 
     ); 
    } 
} 

export default reduxForm({ 
    form: 'morpheus' 
})(Morpheus)