React Native-使用动态密钥更新子级中的父状态

时间:2018-11-21 17:31:01

标签: javascript react-native

我对Javascript和React Native都非常陌生,我正在尝试通过使用回调键(使用动态键)来更新父状态,以避免编写多个函数。

在父组件中,我将此函数传递给子对象,以根据用户文本输入更新父对象的状态。 此代码可达到预期的效果

在父母中:

_setAge = (value) => {
this.setState({age: value})}

<ChildComponent name = 'Update Age' _setAge = { this._setAge.bind(this) } />

在儿童中:

//Other child code
<TextInput onChangeText = { (input) => {this.props._setAge(input)} }
//Etc.

但是,我正在寻找一种将期望的状态键从父级传递给子级的方法,以动态更新状态。我尝试了以下方法:

在父母中:

const ageKey = 'age'

_setAge = (value, stateKey) => {
this.setState({ [stateKey]: value })}

<ChildComponent name = 'Update Age' _setAge = { this._setAge.bind(this) } stateKey = ageKey } />

在儿童中:

//Other child code
<TextInput onChangeText = { (input) => this.props._setAge(input, this.props.stateKey)
//Etc.

但是,这不起作用。我目前的工作是为我的6个子组件编写6个函数,每个函数都更新期望状态。但是,尽管这对于我的基本应用程序是可行的,但我正在寻找一种对将来的项目更具可伸缩性的方法。谢谢!

1 个答案:

答案 0 :(得分:0)

  
    

在父母中     与其在子键的props中传递stateKey,不如直接在child的onChageText方法中传递状态键。代码看起来像这样->>>>

  
_setAge = (value, stateKey) => {  
this.setState({ [stateKey]: value })}

<ChildComponent name = 'Update Age' _setAge = {this._setAge} /> // providing no statekey here
  
    

在孩子里面

  
<TextInput onChangeText = { (input) => this.props._setAge(input, 'age') } 
   // here i know statekey for each child so i directly pass the key from child so i dont have to pass it as a props and then access it