'this.setState'形式のReact.jsで重複した機能を避けるための良い習慣は何ですか？

Question

私は次のコードを持っている：

@autobind 
    setName(name){ 
    this.setState({name: name}); 
    } 

    @autobind 
    setLocation(location){ 
    this.setState({location: location}); 
    } 

    @autobind 
    setReference(reference){ 
    this.setState({reference: reference}); 
    } 

上記置いすべての機能は同様の構造を持っている、と私は違う設定する自分自身を繰り返すことを避けるためにReact.jsで良い習慣があるかどうか知りたいのですが状態。

ありがとうございます。

Answer 1

あなたはむしろキーの値よりも、値としてオブジェクトをとる関数を作成し、setState

setValue(object) { 
    this.setState(object) 
} 

にそれを渡すなど、それを使用することができます。

<div onClick={() => this.setValue({ reference })} /> 

が、その後、あなたはかもしれません同様にsetStateと直接電話してください。 setStateがその関数であるため、

<div onClick={() => this.setState({ reference })} /> 

だから、本当にあなたはそれらの機能のいずれかを必要としません。

しかし、この一般化されたsetValue関数は、子に渡すときに役立ちます。

<Child setParentState={this.setValue} /> 

と私はそのようなものをやったことがない認めるものの

<div onClick={() => this.props.setParentState({ reference })} /> 

それを使用しています。子要素にあまりにも多くの制御を与えるようだが、控えめに使用されるとうまくいくはずです。