Kurucuda bağlanma, parametrelere nasıl geçilir

Question

React sınıflarımı ES6'ya dönüştürmeye çalışıyorum, ancak bu işlemde zorluk yaşıyorum. görünüm oluştur.

Şimdi, bir parametreyi gereken bir setstate olan, örneğin bir kök modülü varsa: customElement modülü içinde Sonra

<customElement updateMood={this.updateMood}></customElement> 

:

constructor() { 
    super(); 

    this.state = { 
     mood: "" 
    }; 

    this.updateMood(value) = this.updateMood.bind(this,value); 
} 

updateMood(value) { 
    this.setState({mood: value}); 
} 

Sonra bir bileşene bu işlevi geçmesi

constructor() { 
    super(); 
} 

update(e) { 
    this.props.updateMood(e.target.value); 
} 

ve

işlemek: Ben böyle bir şey var

<input onChange={this.update} /> 

Bu doğru yol mu? Devam etsin diye ;-(alamayan bu yana sözdizimi hatası olduğu için

Answer 1

Sen, bu this.updateMood(value) = this.updateMood.bind(this,value); inşaat kullanamaz.

Bu

class CustomElement extends React.Component { 
    constructor() { 
    super(); 
    this.update = this.update.bind(this); 
    } 

    update(e) { 
    this.props.updateMood(e.target.value); 
    } 

    render() { 
    return <input onChange={this.update} /> 
    } 
} 

class Parent extends React.Component { 
    constructor() { 
    super(); 

    this.state = { 
     mood: "" 
    }; 

    this.updateMood = this.updateMood.bind(this); 
    } 

    updateMood(value) { 
    this.setState({ mood: value }); 
    } 

    render() { 
    return <div> 
     <CustomElement updateMood={this.updateMood}></CustomElement> 
     <h1>{ this.state.mood }</h1> 
    </div> 
    } 
} 

Example gibi sorununuzu çözebilir

Answer 2

veya typescript kullanırken, babel ayarlarına bağlı olarak veya aşağıdaki aynı olması, fakat çok daha uygun yazmaktır/bakımını:

class Parent extends React.Component { 
    constructor() { 
    super(); 

    this.state = { 
     mood: "" 
    }; 
    } 

    updateMood = (value) => { 
    this.setState({ mood: value }); 
    } 
}