Yanıt Gönderme/Yeniden Gönderme formunda gönder

Question

Bir kullanıcı bir form gönderdiğinde form değerlerini yakalamak istiyorum.

var CommentForm = React.createClass({ 
    handleAuthorChange: function(e) { 
    this.setState({author: e.target.value}); 
    }, 
    handleTextChange: function(e) { 
    this.setState({text: e.target.value}); 
    }, 
    handleSubmit: function(e) { 
    e.preventDefault(); 
    var author = this.state.author.trim(); 
    var text = this.state.text.trim(); 
    if (!text || !author) { 
     return; 
    } 
    render: function() { 
    return (
     <form className="commentForm" onSubmit={this.handleSubmit}> 

Bu stil girişi başına bir taşıma fonksiyonu aracılığıyla duruma tüm değişiklikleri iter: öğretici gösterileri bu tepki. Eğer Redux'la dolu olsaydım, karışıma pek çok şey gibi görünen, harekata eylemler ve eylem yaratıcıları ekleyeceğime inanıyorum.

handleSubmit numaralı argümana yapılan bir olaydır.

Çalışmak çok daha kolay görünen aşağıdaki React/Redux başlangıç ​​kitine rastladım. Formun onSubmit işleyicisi için işleyici neden

Container

@connect(
() => ({}), 
    {initialize}) 
export default class Survey extends Component { 
    ... 

    handleSubmit = (data) => { 
    window.alert('Data submitted! ' + JSON.stringify(data)); 
    this.props.initialize('survey', {}); 
    } 

    render() 
    return (<SurveyForm onSubmit={this.handleSubmit}/>) 
    ... 

Presentational

class SurveyForm extends Component { 
    static propTypes = { 
    handleSubmit: PropTypes.func.isRequired, 
    } 

    render() { 
    const { handleSubmit } = this.props; 
    return (
     <div> 
     <form className="form-horizontal" onSubmit={handleSubmit}> 
    ... 
    } 
} 

Ne belirsiz olduğum: Akıllı bir/konteyner bileşeni ve dilsiz/sunumsal bileşen kombinasyonunu kullanır Facebook öğretici için argüman için bir olay alarak, ancak başlangıç ​​kitinin onSubmit işleyicisinin form verilerini neden aldığını ... Başlangıç ​​seti'den faydalanıyor 10 paket ancak doğrudan bu işleyicinin nasıl davranacağını nasıl etkilediğini görmüyorum.

Answer 1

Anahtar, SurveyForm sınıfında ES2016 decorator olarak kullanılmakta olan redux-form sınıfındadır.

... 
@reduxForm({ 
    form: 'survey', 
    fields: ['name', 'email', 'occupation', 'currentlyEmployed', 'sex'], 
    validate: surveyValidation, 
    asyncValidate, 
    asyncBlurFields: ['email'] 
}) 
export default 
class SurveyForm extends Component { 
... 

dekoratör bir kaydırma bileşeni dönen SurveyForm için bir ambalaj fonksiyonu olarak hareket edecektir.

Fark etmiş olabileceğiniz gibi, SurveyForm bileşeni, kapsayıcıya aktarılmayan bir handleSubmit desteğini kabul eder. Bunun nedeni, @reduxForm dekoratörünün sağlamasıdır. Olay daha sonra işlenir ve en üst düzey onSubmit desteğiyle kap işleyicisine yalnızca formData döndürülür.

Esasen, sarılmış bir SurveyForm bileşenini döndüren reduxForm olarak düşünebilirsiniz.

there koduna dalabilir, ancak uyarılırsınız, oldukça yoğun.