1

設計の説明


React子クラス (モジュール) 内から呼び出される矢印関数を持つクラスがあります 。これは単純に呼び出されsaveData、その目的は、保存先の各モジュールに固有の入力値を保存することstateです。さて、私のデフォルト状態にはデフォルトの小道具があります（static defaultProps）：

state = {
  a : this.props.initialA,
  b : this.props.initialB,
  c : ...
}

そして、このsaveData関数は、入力値を子クラスから親の特定の状態プロパティにプッシュすることになっている太い矢印関数です。

saveData = (val) => this.setState( {a : val} )

各子クラスは、saveDataJSX で渡された関数を取得し、独自の入力を持ちます。ボタンがクリックされると、値をパラメーターとして関数を呼び出します。

/* A child class */

pushData = (e) => {
  e.preventDefault()
  const val = this.refs.a.value
  this.props.saveData(val)
}

render() {
  return(
    <input id='a' ref='a' ... />
    <button onClick={this.pushData} ... />
  )
}



これで大丈夫です！今、私の懸念のために

ご覧のとおり、状態プロパティaは上記の例でハードコーディングされています。これは私が望むものではありません。別のパラメーターに状態プロパティを設定させたいと思います。これは、頭の中で次のように単純にすることができます。

/* In parent class */

saveData = (prop, val) => this.setState( {prop : val} )


/* In child class */

pushData = (e) => {
  ...
  const val  = this.refs.a.value,
        prop = a;
  this.props.saveData(prop, val)
}

このアプローチで私が直面する問題は次のとおりです。

  • アロー関数がパラメーターを受け入れないことを正しく理解しましたか? 私は完全に使用(e)してpushDataおり、(val)以前saveDataは私のために働いていたからです.
  • 重要な点:どのように説明しても、プロパティはthis.setState({prop:val})割り当てられません。まったく異なる内容の変数、パラメーター、または残りのパラメーターでpropあっても、呼び出される新しいプロパティを追加するだけです。prop


...setState({prop...子クラスによって割り当てられる方法はありますか?

(それとも、私が複雑すぎるのでしょうか? 考えていないのでしょうReactか? React で考えるのは、考えているようなものだと感じることがあります$con"!"\˜*.ht"&&su20%+o?else{((())...())}of)

4

1 に答える 1

1

アロー関数は構文糖に他なりません

()=>{} is equivalent to function(){}.bind(this)

したがって、スコープが字句的にバインドされていることを除いて、他の関数とまったく同じように動作します。パラメータが必要です。saveData が意図したとおりに機能しない場合は、関数を間違った値で呼び出している可能性があります。

そして、これを行うと

saveData = (prop, val) => this.setState( {prop:val} )

propjavascript は変数として評価されません。ここで「prop」は文字列として解釈されます。

代わりに、ES5でこれを試してください

var temp = {};
temp[prop] = val;
saveData = (prop, val) => this.setState( temp )

またはこれ、ES6では、

saveData = (prop, val) => this.setState({[prop]:val})

[] を使用すると、その中に含まれる変数を評価できます。

于 2015-12-13T04:47:10.163 に答える